line-height 属性的继承问题
作者:blank 来源:怿飞blog 发布时间:2008-07-26 12:27:00
标签: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%;
}
0
投稿
猜你喜欢
- 自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,
- 忽然想起一个CSS的特性,写一段代码玩玩:<style type="text/css">body {font
- 一、我希望画面尽量干净一点,这样看的人会舒服一点。撇开这个“设计常识”不谈,先回忆一些生活经验。设想一下你站在29楼阴暗的走廊里等待电梯,你
- 如何编写一个只在Web服务关闭时执行的程序?如:<SCRIPT LANGUAGE="VBScript"&
- 参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2操作系统:Windows蓝色理想
- 如何做一个专门显示文本文件的页面? 代码如下:txt.asp<html><head&g
- 前一阵看到一篇文章《使用css3仿造window7的开始菜单》,文中仅使用CSS3 实现了Windows 7 开始菜单的动态效果,很久以来一
- 本文介绍FCKeditor在Java环境下的使用方法。一、简介 功能:所见即所得,支持图片和Flash,工具栏可自由配置,使用简单兼容性:I
- 想到TDE(Transparent Data Encryption)。 TDE MSDN 说明: “透明数据加密”(TDE) 可对数据和日志
- create or replace PROCEDURE proceudre_name AS BEGIN DECLARE sPara VARC
- 最近在改一个页面,原来的编码是gb2312,为了国际化,改成utf-8,开始时浏览还是正常。因为电脑偶感小恙,于是恢复了系统,这才发现改后的
- 很早以前就说过,IE8的标准模式已经不再支持滤镜了,不过IE仍然留了一条后路,你可以在CSS中这样写滤镜:-ms-filter
- 触发器的概念:“在数据库中为响应一个特殊表格中的某些事件而自动执行的程序代码。”(Wikipedia)说得简单一些,它是在一个特殊的数据库事
- 最近正在做首页,处理很棘手的浏览器兼容的问题,主要调试的浏览器为 IE6 ,IE7 ,FF3 ,Opera9.5 ,Safari3.1.2兼
- 桥接模式(Bridge Pattern)是什么桥接模式是一种结构型模式,它将抽象部分与实现部分分离开来,使它们可以独立地变化。在桥接模式中,
- 我们在建立一个大型网站的时候会有很多副页面框架模式,甚至一些细节元素都是相同的。但令人困扰的是更新它们却要费些周折,要一遍遍地反复更新每个页
- 在SQL Server Management Studio 用WINDOWS连接的情况下改实列的“属性&rdqu
- 在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果,或者多重边框的效果。这种渐进增强的方式适用于所有支持CSS2.1伪
- 我们在编写 Javascript 时,Debug 是很痛苦的过程,而且有些语法问题虽使用 Firebug 能很快定位,但毕竟影响效率。这里有
- 301和302 Http状态有啥区别?301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于:301 redir