2

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

有一个带有位置的特色滑块：相对；里面有元素，位置：绝对；

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

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

我为特色滑块下方的两个元素添加了 304px 的边距顶部，但除了谷歌浏览器之外，每个浏览器的差距都很大

4

3 回答 3

3

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

在 Chrome 中：

铬元素

在火狐中：

火狐元素

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

于 2012-04-13T19:22:20.920 回答
1

我相信问题在这里：

// 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-13T19:27:07.630 回答
0

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

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

铬合金：<div id="featured">

该 DIV 的高度在 Chrome 中为零。

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

于 2012-04-13T19:22:21.153 回答