我已经使用 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 中最后一个导航元素在下面消失了。
在 Firefoxpadding:0 25.7px;
中给出了正确的结果
在 chromepadding: 0 26.5px;
中给出了正确的结果
如何确保填充在两个浏览器上都能正常工作?
注意:我已将文档类型定义为<!DOCTYPE html>