html – CSS行高在safari上呈现不同

2023年5月30日 216次阅读

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

《html – CSS行高在safari上呈现不同》

苹果浏览器：

《html – CSS行高在safari上呈现不同》

谁知道为什么会这样？

JSFiddle

最佳答案 这似乎是一个比例问题,边界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;
}
<span>Text here</span>
点赞