Question

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

在Firefox中：

enter image description here

在Internet Explorer 8中：

enter image description here

在谷歌浏览器中：

enter image description here

为什么最后两个分离得很薄？

这是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;
    }
}

Answer 1

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

尝试：

line-height: 1;

...并稍微调整一下，看看它是否有所作为。

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

Answer 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

按像素设置的边距在Firefox，Chrome和IE8之间不一致

2 个答案: