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

Question

举个例子:

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>

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

火狐:

• 2px 顶部和底部
• 左 1 像素
• 0px 右边

Chrome:

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

将 margin 和/或 padding 重置为 0 没有任何作用。有没有办法让浏览器之间的这种情况更加一致？最好是所有边都具有相同的边距？

Answer 1

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

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