Chrome和Firefox在链接上有1像素的区别

Question

大家好，我该如何解决Chrome和Firefox之间1像素的差异？ 我的菜单链接在Chrome中看起来正常，但在Firefox中，我的菜单链接比Chrome小1像素。

这是CSS：

ul#menu {
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    margin-top:-3px;
    margin-left:7px;
    float:left;
    height:34px;
    display: inline-block; 
}

ul#menu li {
    text-align: center;
    display: inline;
    list-style: none;
    font-family: 'Museo300Regular';
    font-size:15px;
    font-style:normal;
    line-height: 1;
}

ul#menu li a {
    background-image:url(../../images2/images/menu_bg_normal.jpg); 
    background-repeat: repeat;
    padding:5px 23px 6px 23px; /*üst sol alt sağ */
    font-weight: normal;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #FEFEFF;
    cursor:pointer; 
}

.deneme 
{
    width:964px;
    margin-left:auto;
    margin-right:auto;
}

这里是HTML部分：

<div class="deneme">
    <ul id="menu">         
     <li><a>Başkan</a></li>
     <li><a>Meclis</a></li>
     <li><a>Enc&#252;men</a></li>
     <li><a>Kurumsal</a></li>
     <li><a>Maltepe</a></li>
     <li><a>Etkinlikler</a></li>
     <li><a>İhaleler</a></li>
     <li><a>E-Belediye</a></li>
     <li><a id="link">Linkler</a></li>
    </ul>
</div>

- learnmore

---

非常奇怪。顺便说一下，它不是比1像素更小，而是在Firefox中向下移动了1像素，高度是相同的。 - Andrea Ligios

Answer 1

编辑3：添加图片以证明高度相同...

放大查看

详细信息：

编辑2： 这与您的第一个代码完全相同，并且在Chrome和Firefox中呈现相同：http://jsfiddle.net/qavB6/4/

已添加

ul#menu li {
/*...*/
display: inline-block;
margin-top: 4px;
}

将line-height: 35px;添加到ul#menu li a {中。

享受...

编辑：

如果将行高设置为某个值以下，则在Firefox和Chrome上呈现相同的方式。

http://jsfiddle.net/qavB6/3/

我不知道为什么，但深入挖掘后发现，在Chrome中设置line-height: 38px;或line-height: 37px;不会改变行高，而在Firefox上会改变。

您可以在Chrome中看到36px和37px之间或38px和39px之间的差异，但不能在37px和38px之间。这就是奇怪的行为开始的地方...

- Andrea Ligios

---

我已经在Firefox和Chrome中检查过，仍然存在同样的问题。您可以使用Chrome和Firefox检查您的fiddle。在Chrome中，您的fiddle菜单大小为85x28，在Firefox中为87x29。 - learnmore

我已经编辑了答案，你能检查一下所描述的行为吗？ - Andrea Ligios

是的，我理解你的意思，但仍需要一个解决方案 :) - learnmore

尝试保持行高小于37像素，并使用margin-top和margin-bottom来分离元素。 - Andrea Ligios

我开始认为是你的调试系统显示了1像素的差异。我会附上两个浏览器并排打开的图片，无论firebug或chrome检查器说什么，高度肯定是相同的...(我只检查高度) - Andrea Ligios

Answer 2

这段代码只针对Firefox使用CSS

<style type="text/css">
@-moz-document url-prefix() {
h1 {
    color: red;
}
}
</style>

使用这段代码来分离Firefox的CSS，用你的代码替换h1以达到像素完美的效果。

- Selvamani

---

我遇到了同样的问题，我添加了菜单CSS属性而不是h1，但我得到了相同的结果，只有1像素的差异。 - learnmore