爲什麼在一個相對定位的元素之後，鉻將底部元素拉起來？

這裏有一些我從來沒有想過我會鍵入：鉻打破布局，但IE瀏覽器（或任何其他瀏覽器的事）不...爲什麼在一個相對定位的元素之後，鉻將底部元素拉起來？

有一個特色的滑塊與位置：相對;內部元素與位置：絕對;

通過元素的JavaScript循環來創建一個旋轉圖像

見：http://guardianweb.edulence.com/model10/

我添加的304px的特色滑塊下方的兩個元素的邊距，但差距巨大除谷歌瀏覽器之外的每個瀏覽器中

2012-04-13 Kegan Quimby

可能與此http://groups.google.com/group/有關jquery-en/browse_thread/thread/0a66b577b7036a14？pli = 1 – 2012-04-13 19:24:11

發生的情況是，其他瀏覽器錯誤地將高度305px和寬度940px應用於您的#featured部門。我不知道他們爲什麼要這樣做。 Chrome正確地執行由於元素內沒有內容（絕對定位的元素不佔用文檔流中的任何空間），因此呈現該元素的高度爲0。

在Chrome中：

Chrome element

在Firefox：

Firefox element

我想一個辦法可以解決這個是手動指定寬度和身高在你的#featured elem這樣所有瀏覽器（包括Chrome）的行爲都是一樣的。

來源

2012-04-13 19:22:20 animuson

ahhhh當然，Chrome是唯一正確執行此操作的瀏覽器。感謝您的幫助:) – 2012-04-13 19:27:53

瀏覽器沒有應用內聯高度和寬度，插件是。看起來像鉻一樣是報道一個有趣的'innerHeight'，但頁面改變之前，我可以縮小它。如果插件沒有設置大小，該插件應該調整div的大小。 – 2012-04-13 19:47:24

這不是Chrome的錯。如果您檢查了#featured元素，您會注意到此元素在Firefox中通過CSS內聯樣式設置了高度和寬度，但在Chrome中沒有。

火狐：<div id="featured" style="width: 940px; height: 305px;">

鉻：<div id="featured">

是DIV的高度是在Chrome爲零。

這style屬性是通過JavaScript添加到DIV，所以你必須弄清楚爲什麼它增加了對火狐，而不是Chrome瀏覽器...

來源

2012-04-13 19:22:21

我相信這個問題是在這裏：

// stretch container 
var reshape = opts.containerResize && !$cont.innerHeight(); 
if (reshape) { // do this only if container has no size http://tinyurl.com/da2oa9 
    var maxw = 0, maxh = 0; 
    for(var j=0; j < els.length; j++) { 
     var $e = $(els[j]), e = $e[0], w = $e.outerWidth(), h = $e.outerHeight(); 
     if (!w) w = e.offsetWidth || e.width || $e.attr('width'); 
     if (!h) h = e.offsetHeight || e.height || $e.attr('height'); 
     maxw = w > maxw ? w : maxw; 
     maxh = h > maxh ? h : maxh; 
    } 
    if (maxw > 0 && maxh > 0) 
     $cont.css({width:maxw+'px',height:maxh+'px'}); 
}

!$cont.innerHeight()在chrome中似乎是錯誤的，但在其他瀏覽器中卻是錯誤的。這會導致插件爲div設置特定的高度和寬度，因爲在Chrome中沒有設置高度，這意味着它仍然爲0.

來源

2012-04-13 19:27:07

爲什麼在一個相對定位的元素之後，鉻將底部元素拉起來？

回答

相關問題