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

【问题标题】：What's causing this difference in rendering between Webkit and Gecko + Trident?是什么导致了 Webkit 和 Gecko + Trident 之间的渲染差异？
【发布时间】：2011-08-01 19:19:57
【问题描述】：

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

这是我正在经历的：
_{（来源：mindcontrolled.nl）}

在 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 像素。

即使这 390 像素不足以容纳整个列表，div 也可以简单地向左扩展。当字体呈现稍有不同或

还有点奇怪的是，如果我删除了

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

来自 CSS，它不会对列表中第一个元素的位置做任何事情。相反，它改变了 LI 在 second 线上的位置！然后，“Helpdesk”会奇怪地与“Over ons”对齐。

我的解决方法：如果我为至少 390（当前宽度）加上 20 像素（我使用第一个子元素删除的边距）的顶部菜单 DIV 定义了一个固定宽度，最小总固定宽度为 410 像素，则所有元素都保持在同一行。

很想听听大家对此的看法。

【问题讨论】：

标签： html css google-chrome webkit gecko

【解决方案1】：

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

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

这是 Chrome：

和火狐：

【讨论】：

我意识到您使用的是 html4 文档类型，我没有使用过。
我不熟悉 jsfidle，但我想我已经更新了页面以包含显示问题的完整 HTML 和 CSS：jsfiddle.net/gFevt/10

【解决方案2】：

我发现了问题所在：您使用的是明确的网页宽度。因此，即使浏览器窗口足够宽，最后一项也不适合，因为您没有给它足够的空间。要解决此问题，请不要为您的网页指定宽度并重做 CSS 以适应浏览器窗口的宽度。

【讨论】：