为什么铬在相对定位的元素之后拉动底部元素？

Question

这是我从未想过会输入的内容：chrome会破坏布局，但IE（或其他任何浏览器）都没有......

有一个特色滑块，位置为：relative;里面有元素的位置：绝对;

javascript循环遍历元素以创建旋转图像

请参阅：http://guardianweb.edulence.com/model10/

我在精选滑块下方的两个元素中添加了一个304px的上边距，但除了谷歌浏览器之外，每个浏览器的差距都很大

Answer 1

正在发生的事情是其他浏览器错误地将305px的高度和940px的宽度应用于#featured除法。我不知道为什么他们这样做。 Chrome 正确呈现高度为0的元素，因为元素中没有内容（绝对定位的元素不占用文档流中的任何空间）。

在Chrome中

在Firefox中：

我认为您可以通过一种方法解决此 以手动指定#featured元素的宽度和高度，以便所有浏览器（包括Chrome）的行为相同。

Answer 2

我相信问题在这里：

// 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.

Answer 3

这不是Chrome的错。如果你检查#featured元素，你会注意到这个元素的高度和宽度是通过Firefox中的CSS内联样式设置的，但不是在Chrome中。

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

Chrome：<div id="featured">

Chrome中DIV的高度为零。

通过JavaScript将style属性添加到DIV中，因此您必须弄清楚它为Firefox添加的原因，而不是Chrome ...