使用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;
}

Answer 2

这是因为用户代理样式表。使用CSS添加设置所需的填充，但不要忘记添加！重要！所以它必须看起来像这样：              nav ul li a {            位置：相对;            填充：2px！important;            display：inline-block;            背景颜色：红色;            line-height：1;         }