0

一周前我已将此提交给Webkit bugzilla（包括完整的 CSS 和 HTML），但到目前为止还没有收到回复。同时，我想知道是我还是 Webkit 在做一些奇怪的事情。我已经找到了一种解决方法，只是在寻找导致这种差异的确切原因的答案。

这是我正在经历的：（ 来源：mindcontrol.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 在第二行的位置！然后，“Helpdesk”将奇怪地与“Over ons”对齐。

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

喜欢听听每个人对此的看法。

4

2 回答 2

0

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

于 2012-07-27T16:09:10.357 回答
0

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

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

这是铬：

在此处输入图像描述

和火狐：

在此处输入图像描述

于 2011-04-08T20:46:16.593 回答