DDR爱好者之家

CSS教程:line-height属性的继承
站长资源 2024/11/5 佚名
43 1538
DDR爱好者之家 Design By 杰米

原文：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，多出的字体部分上下溢出，所以会出现字体重叠的现象。
那这个问题如何解决呢？
解决方案：我们给 .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》
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米