CSS教程:line-height属性的继承


原文:http://www.planabc.net/2008/07/25/unitless-line-heights/
淘宝商城的detail 页面“产品详情”部分是商家自定义区块,曾出现这样一个问题:





品牌:XZX

市场价:145元

颜色:黑色

面料:棉

尺码:S M L

衣长:S 89 M 90 L 91

肩宽:S 35 M 36 L 37

胸围:S 88 M 92 L 96

下摆:S 104 M 108 L 112

袖长:S 17 M 17.5 L18

由于测量方法不同,误差在2CM左右!




你会发现上面例子的文字会重叠在一起!这是什么原因呢?
由于.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%;
}

参考阅读:《Unitless line-heights》

你可能感兴趣的:(CSS教程:line-height属性的继承)