首页 文章

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

提问于
浏览 次
1

请看以下示例：

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>

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

Firefox:

  • 2px顶部和底部

  • 1px离开

  • 0px对

Chrome:

  • 1px左，上，右

  • 2px底部

将 margin 和/或 padding 重置为0不执行任何操作 . 反正在浏览器之间有更多 consistent 吗？优选地，所有边都具有相同的边距？

css google-chrome firefox margin text-rendering

1 回答

  • -1

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

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

相关问题