Firefox 和 Chrome 之间带有边框的文本周围的边距/填充不一致答案

【问题标题】：Inconsistent margin/padding around text with a border between Firefox and ChromeFirefox 和 Chrome 之间带有边框的文本周围的边距/填充不一致
【发布时间】：2017-11-16 18:47:51
【问题描述】：

举个例子：

span {
  color: blue;
  border: 1px solid blue;
  font: 9px Arial;
  font-weight: bold;
}

<span>LOREM IPSUM</span>
<span>LOREM IPSUM</span>
<span>LOREM IPSUM</span>
<span>LOREM IPSUM</span>

浏览器会在边框和文本之间添加一些不一致的边距/填充：

火狐：

上下两像素
还剩 1 像素
0px 右

铬：

左、上、右各 1 像素
2px 底部

将 margin 和/或 padding 重置为 0 不会执行任何操作。有没有办法让浏览器之间更加一致？最好是所有边都有相同的边距？

【问题讨论】：

进行浏览器检查并明确设置边距。
@machnaimh 不确定你的意思。我根本没有添加任何边距，它们是由浏览器添加的。即使我重置它们（margin 和 padding），这些边距仍然存在。
stackoverflow.com/questions/6737175/firefox-specific-margin
@machnaimh Chrome 比 Firefox 问题多。

标签： css google-chrome firefox margin text-rendering

【解决方案1】：

您可以尝试使用不同的前缀，例如：

.someDiv {
   height: 19px; // probably your code
   -webkit-height:19px; // for chrome and safari
   -o-height:19px; // for opera
   -moz-height:19px; // for firefox
}

【讨论】：