如何在CSS包装文本时纠正CSS中的重叠间距错误？

Question

现在，当我转移到移动设置时，会发生这种情况。我该如何纠正？

我尝试将<meta name="viewport" content="width=device-width, initial-scale=1">添加到每个this answer的标头中。我目前使用的CSS看起来像这样：

html {  
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #61666c;
    line-height: 1.5em;
    border-top: 10px solid #ECEEF1;
    border-bottom: 10px solid #ECEEF1;
    -webkit-text-size-adjust: none;
}

h1 {
    font-size: 40px;
    font-weight: 300;
}

Answer 1

问题在于，line-height规则中的html被硬编码为特定值，因为您使用em单位。它的计算值为font-size的{​​{1}}的1.5倍。

如果您希望单位相对于每个元素的当前html，则不应提供单位。

因此，将font-size规则更改为html即可解决问题。

因此它继承得很好，但您将其设置为line-height: 1.5; 1.5（通常默认），因此它是16px。然后，您将24px的{​​{1}}设置为font-size，超过h1一点......