Question

我似乎在Firefox和Safari / Chrome之间的界限之间存在一些小问题。

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

How webpage looks in Safari/Chrome

正如您所看到的，这些链接与矩形“第一创世纪”徽标排列在一起。

This is how it looks in firefox

正如你所看到的，链接在左侧有点拉伸，因此不知何故导致底线向下移动一点。

我发现这个问题是一个优势：1px;我给链接集中的每个链接（主页，关于我们，产品，联系人），似乎firefox正在使1px边距比Safari或Chrome大得多，并且扭曲它。

我尝试加入通用标签

{margin：0;填充：0;边界：0;}

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

Answer 1

这是关于不同的浏览器如何呈现不同的字体。（你会注意到Verdana例如两者都很好）

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>

Firefox和Chrome / Safari之间的保证金差异

2 个答案: