使用 Safari/Chrome/FF 处理文本上的填充答案

【问题标题】：Deal with padding on text with Safari/Chrome/FF使用 Safari/Chrome/FF 处理文本上的填充
【发布时间】：2017-05-30 11:25:51
【问题描述】：

我试图了解我如何在所有浏览器上使用不同的填充。这是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

有解决方案吗？

【问题讨论】：

您的结果真的是a 元素或其他东西的填充，例如ul 或li？您能否也为您的ul 和li 提供CSS？
我更新了我的代码，但是这个问题出现在我的网站上到处都是，不仅在这个li / a上
浏览器中的开发者工具可以告诉你where the padding comes from。可能有些东西会覆盖你的风格。
是的，我知道，但没有什么可以替代。最连线的是默认的“无衬线”字体系列也有同样的问题。
也许是因为我有一本“旧”的 Mac 书，没有视网膜屏幕，并且使用 em 字体会产生错误……

标签： html css google-chrome firefox safari

【解决方案1】：

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

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

【讨论】：

已经在*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}上找到了

【解决方案2】：

这是因为用户代理样式表。添加使用 CSS 设置您想要的填充，但不要忘记添加！重要！所以它必须看起来像这样：导航里一个{ 位置：相对；填充：2px！重要；显示：内联块；背景颜色：红色；行高：1； }

【讨论】：

不改变什么，我认为是类型，每个浏览器对类型的解码方式不同