Question

大家好，如何修复Chrome和Firefox的一个像素差异？我的菜单链接在Chrome中正确显示，但在Firefox中，我的菜单链接比Chrome小1 xx

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

Answer 1

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

大视图

enter image description here

关闭细节：

enter image description here

编辑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/

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

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

Answer 2

此代码仅针对带有CSS的Firefox

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

使用此代码分隔Firefox的css，为该像素完美添加代码而不是h1。

Chrome VS Firefox 1 px链接不同

2 个答案: