[英]css padding issue on chrome
我使用 css 设计了一个导航列表。 下面是我的代码
ul#mainnavigation li a {
font: 14px/20px 'Open Sans', Open Sans, Helvetica, Arial, sans-serif;
position:relative;
font-weight:600;
color:#686868;
margin:0;
padding:0 19.7px;
height:50px;
line-height:50px;
display:inline-block;
-webkit-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
-moz-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
-o-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
z-index:100;
}
我遇到的问题是在 Firefox 中它运行良好,但在 chrome 中,最后一个导航元素在下面。
在 Firefox 中padding:0 25.7px;
给出正确的结果
镀铬内padding: 0 26.5px;
给出正确的结果
如何确保填充在两个浏览器上都能正常工作?
注意:我已将文档类型定义为<!DOCTYPE html>
正如您所发现的,不同的浏览器通常为相同的元素呈现略有不同的像素大小 - 这通常是由于字体大小和浏览器缩放字体的方式,但可能出于多种原因。
我的建议是:
1) 如果导航菜单必须是 50px 高,缩放里面的元素,为浏览器留下一点额外的空间,导致问题,或者:
2) 您还可以删除菜单上硬编码的 50px 高度,并让它自动缩放以适合其元素。 如果菜单中的任何内容浮动,请删除菜单容器上的“高度”属性并添加“溢出:隐藏;” 属性到您的 CSS 应该导致菜单扩展到其中所有内容的高度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.