html - 使用 Safari/Chrome/FF 处理文本上的填充

Question

我试图了解我在所有浏览器上的填充方式有何不同。 这是 Safari Chrome 和 Firefox 的屏幕截图，代码完全相同:

nav{
    position:relative;
    text-align:right;
    float:right;
    text-transform:uppercase;
}
nav ul li{
    position:relative;
    margin-bottom:.4em;
   }
nav ul li a{
   position:relative; 
   padding:2px;
   display:inline-block;
   background:red;
   line-height:1;
}
nav ul li a:hover{
    color:#e0e0e0;
}

结果:

• 在 Safari 上:2px 3px 5px 2px
• 在 Chrome 上:4px 1px 2px 1px
• 在 Firefox 上:5px 2px 1px 2px

有解决方案吗？

Answer 1

将 css3 框大小添加到 nav ul li a。尝试一下，希望它能解决问题。

nav ul li a {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}