CSS教程:line-height属性的继承
建站知识 2021-07-03 08:42www.168986.cn长沙网站建设
原文http://.planabc./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》
上一篇:CSS关于初学者的问题
下一篇:cookie和dom操作调用样式表实现网页换肤
长沙网站设计
- 如何进行东阳SEO关键词优化?
- 边坝哪有关键词排名优化:提升你的网站流量与
- 安国百度优化服务:提升您的在线可见性
- 阜康新手做SEO怎么做
- 山西seo网站排名关键词优化:提升您网站曝光率
- 临沂seo网站排名关键词优化:提高你的网站可见
- 广西SEO网站推广怎样付费比较合理
- 双辽SEO网站推广:提升你的网站可见性与流量
- 辽宁企业网站优化购买方式有哪些
- 提升宝清百度SEO排名的实用技巧与策略
- 静宁百度SEO排名:提升您网站曝光率的关键策略
- 彭州百度SEO排名的提升策略和实施指南
- 广南百度关键词SEO:提升网站排名的关键策略
- 辽宁关键词优化怎么做论坛营销
- 吉林百度seo排名如何做到让用户满意
- 内黄百度优化服务:提升在线可见性的关键