CSS line-height
在百度知道里，看到一位网友提问有关line-height的问题。
HTML+CSS代码如下：
<html></head><style type="text/css">#a{ height:90px; width:400px; line-height:60px;background:#003399;}#b{background:#FF6600; width:200px; height:25px;}</style><body><div id=a><div id=b>ddd</div>555</div></body></html>
请测试以上代码，为什么id=a的div设了line-height:60px后 id=b的div 高度设为25px，实际却等于60px呢？怎么样才能在父级div设了line-height的情况下，控制自身的高度。 请在IE6里面测试。看代码id=b的div高度应该是25px;可在IE6里面实际却是60px。 在firefox里高度就是25px,可里面的文字，却跑到外面了。
分析：line-height(行高)是有继承性的。在上述例子里，div(a)的行高=60px，div(b)是div(a)的子级。如果div(b)没有定义行高，那么它将继承父级的行高。由于div(b)的高度是25px，小于行高(60px), 在firefox下文字就跑到div的外面，而在IE6下，当div的高度小于行高，div的高度将被自动扩大，因此显示为60px。
解决方法：给子级定义行高，覆盖继承值。CSS如下：
#b {background:#FF6600; width:200px; height:25px;line-height:25px;}
标签： 百度知道
发贴者：D Cai
| 日志分类
0 条评论:
发表评论
指向此帖子的链接:
创建链接