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

Question

我似乎在Firefox和Safari/Chrome之间的某些间距上有一些小问题。

第一张图片展示了左侧链接和表格下方文本行应该看起来的样子： Safari/Chrome中网页的外观 如您所见，链接与“第一个创世纪集团”标志对齐得很好。 Firefox中的外观 如您所见，左侧链接垂直拉伸了一点，因此导致底部行向下移动了一点。

我发现问题出在我给每个链接设置的margin-top：1px上，而Firefox似乎使这个1px边距比Safari或Chrome大得多并扭曲它。

我尝试放入通用标签

• { margin:0; padding:0; border:0;}

但似乎没有起到帮助作用。有什么想法可以在火狐浏览器中解决这个问题吗？ 这是实际链接：www.snowwhitepowers.com/genesis

- user763597

Answer 1

这是关于不同浏览器如何呈现不同字体的问题。（您会注意到，例如 Verdana 字体在它们两者中都呈现得很好）

- Vic

Answer 2

我会将你的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>

- heymrcarter

---

我对第二点有异议，但更多的是出于好奇。如果您要多次使用虚线，那么使用类“dotted line”再为li设置样式不是更合理吗？此外，如果您以后想要一个没有虚线的li怎么办？或者您是在建议使用内联CSS吗？这不是被认为是一种错误做法吗？ - matchew

@matchw 如果您只想在一些 <li> 中间使用虚线，则使用类会有意义，但不是所有的 <li>。然而，该规则仅适用于带有 class 为 links 的 <ul> 中的 <li>。因此，如果您希望 <ul class="links"> 中的某些 <li> 不具有边框，则这将成为问题。更重要的是，使用 CSS 来绘制线条比一个充满破折号的 <li> 更符合语义。 - heymrcarter

哦，我没有意识到他有一个<li>-----</li>，这比内联CSS更大的失误。很好的发现。 - matchew