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%;

}

参考阅读：《Unitless line-heights》