Question

我已在一周前向Webkit bugzilla (including full CSS and HTML)提交此内容，但到目前为止尚未收到回复。与此同时，我想知道是不是我或Webkit做了一些奇怪的事情。 我已经找到了解决方法，只是寻找导致这种差异的完全的答案。

以下是我遇到的情况： http://woei.mindcontrolled.nl/got/renderverschil-webkit-gecko-trident/chromesafari-vs-firefoxie.jpg

在Chrome 10.0.648.204，Safari 5.0.3（7533.19.4），Firefox 4.0和IE 8版本中测试过。

这是相关代码。我已经在HTML中隔离了这段代码，看看周围的对象是否造成了麻烦，但问题仍然存在。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

[...]

<div id="top">
    <div id="logo">
        <a href=""><strong><span style="color: #005288;">pre</span><span style="color: #00aeef;">view</span></strong> <span style="color: #fcaf17;">website</span></a>
    </div>

    <div id="topmenu">
        <ul>
            <li><a href=""><span>over</span> ons</a></li>
            <li><a href=""><span>onze</span> partners</a></li>
            <li><a href="">contact</a></li>
            <li><a href="">helpdesk</a></li>
        </ul>
    </div>

    <div style="clear: both;"></div>
</div>

CSS：

#container, #top, #contentcontainer {
    padding: 12px;
}

#logo {
    float: left;

    margin: 0;

    font-size: 2em;
    letter-spacing: -2px;
}

#topmenu ul, #mainsubmenu ul {
    margin: 0;
    padding: 0;

    list-style-type: none;
}

#topmenu li, #mainsubmenu li {
    display: inline;
}

#topmenu li {
    margin-left: 20px;
}

#topmenu li:first-child {
    margin-left: 0;
}

#topmenu a {
    color: #005288;
}

#topmenu a:hover {
    color: #00aeef;
}

#topmenu a span {
    color: #005288;
}

我开始测量所有div，看它们是否在Gecko和Webkit中都有相同的自动计算尺寸，并且它们都具有完全相同的宽度测量值（当然，Webkit的高度不同）。它在Chrome的Firebug lite和Firefox（4）DOM-inspector中为390 px。

即使这些390像素不足以满足整个列表，div也可以简单地向左扩展。当字体渲染方式略有不同或

时，情况可能就是这种情况

如果我删除

，那也很奇怪

#topmenu li:first-child {
    margin-left: 0;
}

来自CSS的

，它对列表中第一个元素的位置没有任何作用。相反，它会改变LI在第二行上的位置！然后，“帮助台”将与“Over ons”奇怪地对齐。

我的解决方法：如果我为topmenu DIV定义了一个固定宽度至少为390（当前宽度）加上20像素（我使用第一个孩子移除的边距），最小总固定宽度为410像素，则所有元素都保持在同一条线上。 / p>

喜欢听到每个人都要对此发表的看法。

Answer 1

我创建了a jsfidle并在Chrome和Firefox中对其进行了测试，但我无法重现您的发现。你有没有比你发布的片段更多/不同的html / css？我在两个浏览器中都得到了基本相同的东西，#topmenu li:first-child上应用的边距也完成了两者中应该做的事情。

我在装有Snow Leopard的Mac上安装了Chrome 10和Firefox 3.6.16。

这是Chrome：

enter image description here

和Firefox：

enter image description here

Answer 2

我弄清楚了什么是错的：你使用的是明确的网页宽度。因此，即使浏览器窗口足够宽，最后一项也不适合，因为您没有给它足够的空间。要解决此问题，请不要为网页指定宽度并重新调整CSS以适应浏览器窗口的宽度。

是什么导致Webkit和Gecko + Trident之间的渲染差异？

2 个答案: