line-height 属性的继承问题
作者:blank 来源:怿飞blog 时间:2008-07-26 12:27:00
淘宝商城的 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%;
}
标签:line-height,属性,继承
0
投稿
猜你喜欢
利用sort()和Math.random()实现元素的随机排列
2010-10-19 12:42:00
良好的css代码注释
2008-07-01 13:02:00
大牌 Banner 设计欣赏(468x60)
2008-01-20 13:02:00
提高ASP性能的最佳选择第二部分
2007-08-15 12:46:00
ASP脚本变量、函数、过程和条件语句
2008-10-14 14:43:00
Mootools 1.2教程(9)——输入过滤第二部分(字符串)
2008-12-01 12:25:00
别开生面:纯CSS实现相册滑动浏览
2008-06-26 13:24:00
用户体验设计何去何从,交互设计师又何去何从?
2009-12-28 13:07:00
asp如何用下拉列表显示数据库里的内容?
2010-06-16 09:54:00
英文版面设计的8个禁忌
2009-10-14 20:42:00
asp实现非大小写的替换函数
2010-05-19 21:23:00
JScript 运算符
2007-08-22 16:22:00
Asp 单页查询数据库
2010-05-11 20:11:00
SQL查询不重复记录/删除重复记录
2008-11-18 16:08:00
流动的线条 —— 中国汉字书法之美
2009-10-30 18:15:00
Oracle使用PL/SQL操作COM对象
2010-07-21 12:56:00
asp如何读取服务器上的驱动器?
2009-11-18 20:50:00
新浪微博文字渐隐效果
2011-04-29 12:33:00
phpMyAdmin安装配置方法
2009-09-09 20:15:00
Mysql Explain 详解
2010-12-03 16:09:00