淘宝商城的 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》



共有19 条评论

  1. 1. 头像 MacJi

    不带单位好。但带单位会不会效率高一点,但”*”会不会有效率低,好矛盾哦。。。=.=

  2. 2. 头像 怿飞

    从理论上将带单位肯定比不带单位效率高。但从现在的浏览器处理能力来看,基本可以忽略的。

  3. 3. 头像 怿飞

    毕竟样式的执行效率不像JS那样明显

  4. 4. 头像 rage

    如果真的可以指定变量就好了
    @xxx {
    var:div,span,li;
    }
    .mdse-detail @xxx{
    }
    这样就好了

  5. 5. 头像 Jimbor

    可是原文似乎还是说到不能用140%,因为140%和1.4em的效果是一样的。也就是,只继承父对象已经计算的px值,而1.4的话,都会重新计算行高。

  6. 6. 头像 怿飞

    @Jimbor 两种方法不冲突的,注意最后一种方式的选择符已经改变了

  7. 7. 头像 Jimbor

    看到了。。。。sorry。。。

  8. 8. 头像 tamt

    请问有没有办法让文字无法选中?

  9. 9. 头像 justin

    我不带上em单位呢?

  10. 10. 头像 seven

    从理论上将带单位肯定比不带单位效率高。
    但为何说1.4与140%两者,140%低效呢?

  11. 11. 头像 纯真

    在我处理line-height时,我一般都是用%来设定值。

  12. 12. 头像 怿飞

    @seven 效率低不是单位的问题,是任意选择符 *

  13. 13. 头像 豆猫

    行高是可继承的,但是继承的是计算值,因此,如果设定父元素行高1.4em,实际上,子元素继承的是父元素的font-size * 1.4

    具体的例子可以看这里:
    http://www.ddcat.net/blog/archives/2008/06/228.html

  14. 14. 头像 太阳

    在用户自己定义的部分line-height:normal也可以达到这个效果

  15. 15. 头像 luzijia

    学习了

  16. 16. 头像 网站设计

    之前我在开发的时候好像也出过问题,没有专门学过div+css方面,在IE6里面,正常显示,火狐和IE7中就出现过问题,跟line-height有关

  17. 17. 头像 看看

    这个 html xhtml css 基础教程 里 讲得很清楚的 ,呵呵,基础很重要

  18. 18. 头像 哈迪克

    我自己的站在IE8和FIREFOX下面也有问题。

  19. 19. line-height属性的继承问题 | 第一整站站

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

发表评论

(必填)

(必填,会为您保密)

评论仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签