我根据 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;
}
最佳答案
设置一个 line-height: 1;
强将解决这个问题也阅读我的评论。
关于html - 为什么 Firefox 和 Chrome 中的行高不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42003353/