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

Question

采用以下示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

火狐：

• 2px顶部和底部
• 1px left
• 0px right

铬：

• 1px left，top and right
• 2px bottom

将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
}