line-height的继承问题

关于使用line-height的基本语法和单行文本的垂直居中问题可以查看这里,原文地址: https://www.html.cn/archives/1304

line-height的属性值:
normal 默认。设置合理的行间距。
number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。 例如:line-height:1.5;
length 设置固定的行间距。? 例如:line-height:18px;
%????? 基于当前字体尺寸的百分比行间距。 例如:line-height:150%;

line-height是可以继承的,由于这个特性,子元素就可以不用重复定义line-height了,假设一段文字的line-height:200%;font-size:12px;那么行高应该是24px;而当装在这段文字的容器有子元素的时候,子元素会继承line-height:200%的属性。但是假设这个子元素的字体改变的时候,比如字体一下子到font-size:54px;的时候,比肯能回想到行高应该是108px(54*200%),其实错了。(转载请注明出处:WEB前端开发 https://www.html.cn/)

例如代码:
[code=”html”]

line-height:200%;font-size:12px;

line-height的继承问题
line-height的继承问题
line-height的继承问题

[/code]

我们看看截图:

2009-05-24_191133


有的时候,我们为了实现单行文字的垂直居中,会给line-height一个和height相同的固定的值;有的时候,我们为了调整特定的某段文字的行间距,通常会考虑使用百分比或者相对尺寸的em或者px。这些情况下,我们都不需要考虑line-height的继承,所以我们不会发现任何问题。(转载请注明出处:WEB前端开发 https://www.html.cn/)

那么我们在回去看line-height的属性值,normal ,length,%,3个在子元素的字体改变的时候都不能正常显示了,那么number呢,例如:line-height:1.5;此数字会与当前的字体尺寸相乘来设置行间距。

请看demo页面:https://www.html.cn/demo/line-height/line-height.html

看过例子后,你会发现,只要有单位或百分比的line-height继承,都发生了重叠的现象。那到底这是什么原因导致的呢?

如果line-height属性值有单位或百分比,那么继承的值则是换算后的一个具体的px级别的值;而如果属性值没有单位,则浏览器会直接继承这个“因子(数值)”,而非计算后的具体值,此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。(转载请注明出处:WEB前端开发 https://www.html.cn/)

这种情况碰到最多的博客,留言,论坛等地反,因为这些地方大多有设置字体大小的功能。

另外:
今天在测试的页面的时候还发现一个ie的bug,就是{line-height:150%;font-size:12px;}、{line-height:18px;font-size:12px;}、{line-height:1.5;fon-size:12px;}在页面呈现的时候居然高度不一样,{line-height:18px;font-size:12px;}、{line-height:1.5;fon-size:12px;}呈现的都是18px,而{line-height:150%;font-size:12px;}呈现的却是19px;
其他色数值,例如{line-height:24px;font-size:12px;}、{line-height:200%;font-size:12px;}、{line-height:2;font-size:12px;}又是相等的24px。这是搞不懂IE了。

请看demo页面:https://www.html.cn/demo/line-height/line-height2.html

郁闷的很,我不知道是什么原因,这也正是今天我彻底研究line-height的原因。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » line-height的继承问题

评论 9

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    是不是奇数1.5的问题呢?

    冰剑10年前 (2009-05-25)回复
  2. #-48

    我也遇到这样的问题,还没解决,郁闷ing

    科良10年前 (2009-05-25)回复
  3. #-47

    刚才截图试了一下,你的行高计算有错误吧,应该从基线开始,刚好就是28px,再减去10px的空距,就是18嘛,对的啊,你的对于行高计算基线有问题吧!

    rtqqrtqq10年前 (2009-06-30)回复
  4. #-46

    看不太懂你说的是什么 语言组织能力太差了 讲的没有一点条理

    daosit9年前 (2010-04-10)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏