我有一个问题,额外的填充铬。
在Firefox和IE上一切都很好,但是chrome在底部的"ul“标签和"nav”标签之间添加了一个2px填充。
以下是HTML代码:
<nav id="mainMenu">
<ul id="menuLinks">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
和css:
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
font-size: 13px;
line-height: 1.3em;
}
nav#mainMenu {
height: 35px;
background-color: #F5F5F5;
margin-bottom: 10px;
border-bottom: 1px solid #C2C2C2;
border-radius: 5px 5px 0px 0px;
}
nav#mainMenu ul {
float: left;
padding-top: 15px;
list-style-type: none;
}
nav#mainMenu ul li {
padding-left: 5px;
display: inline;
}
nav#mainMenu ul li a {
color: black;
font-size: 0.9em;
font-weight: bold;
background-color: #FFFFFF;
padding: 5px 15px 4px 15px;
border-top: 1px solid #C2C2C2;
border-left: 1px solid #C2C2C2;
border-right: 1px solid #C2C2C2;
border-radius: 4px 4px 0px 0px;
}
情况是这样的:
铬:
Firefox:
您还可以在这里测试它:http://jsfiddle.net/ozpofj6o/
正如您所看到的,firefox呈现的是正确的,而不是chrome。
有什么想法吗?
发布于 2014-10-16 13:49:15
您的问题与在锚中使用font-size:0.9em
有关。这就让您依赖于字体呈现机制,取决于它们到底会变得多高,而Chrome的当前文本呈现引擎恰好比Chrome低2像素。如果将精确的高度(35 to )放置在容器上,并且仍然希望得到可预测的结果,则应该为锚指定精确的高度。
现在,您可以指望0.9em
和a
上9个像素的填充“意外”加到35个像素,这可能是可能的,也可能不是。它甚至可能会侵入下一个版本的Firefox,或者在另一个平台上。
https://stackoverflow.com/questions/26414433
复制相似问题