Firefox、Chrome 和 IE8 之间按像素设置的边距不一致答案

【问题标题】：Margins set by pixels are inconsistent between Firefox, Chrome and IE8Firefox、Chrome 和 IE8 之间按像素设置的边距不一致
【发布时间】：2012-02-01 02:53:45
【问题描述】：

在这种情况下，IE8 和 Chrome 看起来相同，但 Firefox 显示的内容不同：

在 Firefox 中：

在 Internet Explorer 8 中：

在谷歌浏览器中：

为什么最后两个间隔很窄？

这是 HTML：

    <ul id="navigation">
        <li><a href="@Url.Action("Index", "Home")">HOME</a></li>
        <li><a href="@Url.Action("Index", "OurApproach")">OUR APPROACH</a></li>
        <li><a href="@Url.Action("Index", "Menu")">MENU</a></li>
        <li><a href="@Url.Action("Index", "Contact")">GET IN TOUCH</a></li>
    </ul>

这是 CSS，（使用 SCSS）：

/* The inconsistency is in the margin-top rule of the UL. */
#navigation { /* This is just a UL element. I used the margin-top, to position it. */
    float: left;
    list-style-type: none;
    margin-left: -16px;
    margin-top: 117px;

    li {
        background-color: #934B00;
        @include nav-radius;
        color: White;
        float: left;
        font-size: 14px;
        margin-right: 6px;
        padding: 5px;
        cursor:pointer;

         a { text-decoration:none; color:White; }
         a:hover { text-decoration:none; color:#904E00;}
         a:visited { text-decoration:none; color:White; }
         a:link { text-decoration:none; color:White; }
    }

    li:hover {
        color:#904E00;
        background-color:#EEA74F;
    }
}

【问题讨论】：

在 IE8 中，按 F-12 并查看您处于 STANDARDS 模式还是 QUIRKS 模式。如果您处于 QUIRKS 模式，则说明文档类型声明错误。
你不能像这样嵌套 CSS 声明。
@MattGrande：检查每个“药丸”底部的细长分隔。
马特：有一个像素的差异。
只显示 CSS 对我们没有任何帮助。

标签： html css cross-browser margin sass

【解决方案1】：

实际上看起来像一个行高问题 - 考虑到 normalize.css 不会为 <li> 重置它，它可能是。

试试：

line-height: 1;

...并尝试一下，看看它是否有什么不同。

（更新：重写了整个答案，抱歉）

【讨论】：

【解决方案2】：

有几件事要尝试 - 首先 - 你需要确保 Sass CSS extension library 不是问题，所以在没有它的情况下进行测试。

其次 - 在 Firefox 和 Chrome 的等效版本 (Firebug light or something along those lines) 中使用 Firebug 来检查元素。 Using the HTML inspector and Layout tab，您应该能够准确地看到这些元素的样式/渲染方式。

最后，如果您还没有，请使用 CSS 重置样式表来确保所有浏览器都能正常运行。 Good discussion of the best reset sheets here.

【讨论】：

我正在使用 Normalize.css，到目前为止，按照您的故障排除建议，没有出现明显的问题。基本上，它使用像素 N 和 IE/Chrome 使用像素 N+1（可以这么说）归结为 Firefox。 :S