html - 为什么 Firefox 和 Chrome 中的行高不同？

Question

我根据 Matthew Pennell 的解决方案(codepen by CSS Tricks)创建了多行填充文本。在 Chrome 中，一切看起来都很好，但在 Firefox 中，span 元素的高度大于其祖先的高度。如果我为 Firefox 调整垂直填充，在 Chrome 中也会出现同样的问题，反之亦然。

为什么会这样？这个问题的真正技术原因是什么？

HTML 代码:

<div class="padded-multiline">
  <h1>
    <strong>How do I add padding to subsequent lines of an inline text element?</strong>
  </h1>
</div>

CSS 代码:

:root {
    font-family: Arial, sans-serif;
    font-size: 20px;
}
.padded-multiline { 
  line-height: 1.3; 
  padding: 2px 0; 
  border-left: 20px solid #c0c;
  width: 400px;
  margin: 20px auto;
}
.padded-multiline h1 { 
  background-color: #c0c;
  padding: 4px 0;
  color: #fff; 
  display: inline;
  margin: 0; 
}
.padded-multiline h1 strong { 
  position: relative;
  left: -10px; 
}

Answer 1

设置一个 line-height: 1; 强将解决这个问题也阅读我的评论。