Firefox 和 Chrome/Safari 之间的边距差异答案

【问题标题】：Margin Discrepancies between Firefox and Chrome/SafariFirefox 和 Chrome/Safari 之间的边距差异
【发布时间】：2011-08-30 01:45:10
【问题描述】：

我的 Firefox 和 Safari/Chrome 之间的行间距似乎有点小问题。

第一张图片是左边的链接和底部表格后面的文本行应该是这样的：

How webpage looks in Safari/Chrome

如您所见，链接与矩形“first genesis group”徽标对齐良好。

This is how it looks in firefox

如您所见，链接在左侧有点垂直拉伸，因此不知何故导致底线向下移动一点。

我发现问题是 margin-top:1px;我给链接集中的每个链接（主页、关于我们、产品、联系方式），似乎 Firefox 使 1px 的边距比 Safari 或 Chrome 大得多并扭曲了它。

我尝试放入通用标签

{边距：0；填充：0；边框：0;}

但这似乎没有帮助。任何想法如何在Firefox中解决这个问题？这是实际链接：www.snowwhitepowers.com/genesis

【问题讨论】：

标签： html css cross-browser margin

【解决方案1】：

我会将您的 css 编辑为以下内容：

ul.link{
    list-style:none;
    /*rest of your rules*/
}

ul.links li{
    display:block;
    width:145px; /* or however wide the ul is*/
    height:20px; /* or however tall they need to be*/
    line-height:20px; /* setting the line-height equal to the height centers text vertically*/
    border-top:1px dashed #5c6b40;
}

ul.links a{
    /* styles for links */
}

您还需要更加语义化地格式化您的 html。 <li class="dottedline> 并没有为你做任何事情，最好在 <li> 上加上边框

类似：

<ul class="links">
    <li><a href="home.html" target="iframe">Home</a></li>
    <li><a href="about.html" target="iframe">About Us</a></li>
    <li><a href="eggroll.html" target="iframe">Products</a></li>
    <li style="border-bottom:1px dashed #5c6b40;"><a href="contact.html" target="iframe">Contact Us</a></li>
</ul>

【讨论】：

我对第二点有异议，但更多的是出于好奇。如果您要多次使用虚线，那么使用类虚线然后为您的 li 设置样式没有意义吗？此外，如果你以后想要一个没有虚线的 li 怎么办？还是您建议内联css？这不被认为是失礼吗？
@matchw 是的，如果你想要一些<li> 之间的虚线，那么使用一个类是有意义的，但不是全部。但是，该规则仅适用于带有类链接的<ul> 中的<li>。因此，如果您希望<ul class="links"> 中的某些<li> 没有边框，这只会是一个问题。更重要的是，使用 css 作为行在语义上比 <li> 充满破折号更正确
哦，我没有意识到他有一个
-----