css line-height属性继承浅析

发布时间:2020-06-30编辑:脚本学堂
本文介绍下,css中有关line-height属性继承的相关知识,学习下css line-height属性继承的用法,有需要的朋友参考下。

在淘宝商城detail页面“产品详情”时发现其部分是商家自定义区块,曾出现这样的问题:
 

复制代码 代码示例:
<style type="text/css">
p {
    line-height:17px;
}
</style>
<div class="mdse-detail">
    <p>
        <strong style="font-size:30px">
            品牌:XZX<br />
            市场价:145元<br />
            颜色:黑色<br />
            面料:棉<br />
            尺码:S  M  L<br />
            衣长:S 89  M 90   L 91<br />
            肩宽:S 35  M 36   L 37<br />
            胸围:S 88  M 92   L 96<br />
            下摆:S 104 M 108  L 112<br />
            袖长:S 17  M 17.5 L18<br />
            由于测量方法不同,误差在2CM左右!
        </strong>
    </p>
</div>
 

 
以上例子的文字会重叠在一起!原因何在?

由于.detail-content 中的 p 元素继承了默认设置的全局样式 line-height:17px,而自定义区块又是由商家自定义,其内字体被设置为了 font-size:30px;(可能为任意值),根据 Inline formatting model,得知该文字的 line-box 高为 17px,多出的字体部分上下溢出,所以会出现字体重叠的现象。

解决方法:
为.mdse-detail 下的 p 元素设定样式属性 line-height:1.4。

你有没有注意到以上方法中的1.4 不带单位?
元素的 line-height 属性值会继承父元素(或祖先元素)的 line-height 属性值,如果属性值有单位,则继承的值是换算后具体的 px 值而非原始的值(比如:em、%),而如果属性值没有单位,则浏览器会继承数值(无单位),然后根据该元素的 font-size 值重新解析得到新的 line-height 值。这个和 table 的 tr 设置 display 属性有一点点类似(tr.style.display = ”;,IE 显示 block,而 Firefox 等标准浏览器显示 table-row)。

另外一个相对低效的方法,大家可以参考:
 

复制代码 代码示例:
.mdse-detail p * {
    line-height:140%;
}