CSS line-height 在 safari 上呈现不同答案

【问题标题】：CSS line-height renders differently on safariCSS line-height 在 safari 上呈现不同
【发布时间】：2020-06-14 18:38:51
【问题描述】：

以下代码在 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

【问题讨论】：

看起来 Safari 无法接受您的零行高。

标签： html css safari

【解决方案1】：

好像是比例问题，边框3.3em不能完全覆盖font-size 1em的文字；您可以将边框更改为 3.5em，也可以将字体大小更改为 0.8em。

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

&lt;span&gt;Text here&lt;/span&gt;

【讨论】：

【解决方案2】：

看起来 Safari 发现您的行高（如果可以将零行高称为 height :)）对于这样的 small 边框不满意。与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;
}

&lt;span&gt;Text here&lt;/span&gt;

【讨论】：