CSS line-height在safari上的呈现方式不同

Question

以下代码在Firefox和Chrome浏览器中按预期呈现，但在Safari上，它会在边框之间呈现不需要的白线。

HTML：

<span>Text here</span>

CSS：

span {
  border-top: 3.3em solid #ff9933;
  border-right: 3.3em solid #ff9933;
  border-bottom: 3.3em solid #ff9933;
  border-left: 3.3em solid transparent;
  color: white;
  display: inline-block;
  font-size: 1em;
  line-height: 0;
}

Firefox和Chrome：

Safari浏览器：

有人知道为什么会这样吗？

JSFiddle

Answer 1

这似乎是一个比例问题，边界3.3em不能用font-size 1em完全覆盖文本;您可以更改3.5em的边框，也可以更改0.8em的字体大小。

＆＃13;

＆＃13;

span {
border-top: 3.3em solid #ff9933;
border-right: 3.3em solid #ff9933;
border-bottom: 3.3em solid #ff9933;
border-left: 3.3em solid transparent;
color: white;
display: inline-block;
font-size: 0.8em;
line-height: 0;
}

＆＃13;

<span>Text here</span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

看起来Safari会发现您的行高（如果零线高度可以称为 height :)，则对于这样的小边框不满意。使用 0.380451 0.381955 0 0.237594 0.317293 0.362406 0 0.320301 0.261654 0.38797 0 0.350376 0 0 0 1 0 1 0 0 0 0 0 1 0 0.001504 0 0.998496 0.270677 0.35188 0.018045 0.359398 0.36391 0.305263 0 0.330827 0.359398 0.291729 0.037594 0.311278 0.359398 0.276692 0.061654 0.302256 可以正常工作。

3.5em

span {
border-top: 3.5em solid #ff9933;
border-right: 3.5em solid #ff9933;
border-bottom: 3.5em solid #ff9933;
border-left: 3.5em solid transparent;
color: white;
display: inline-block;
font-size: 1em;
line-height: 0;
}