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

原文：http://www.planabc.net/2008/07/25/unitless-line-heights/

淘宝商城 的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，多出的字体部分上下溢出，所以会出现字体重叠的现象。

那这个问题如何解决呢？

解决方案：我们

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!