CSS属性line-height新解

在做wap新站时候使用了很多html5和CSS3的属性，经测试，一般标准的浏览器（包括PC端的和手机客户端浏览器）都是兼容的比较好，

惟独发现Opera Mobile手机浏览器（也就是国内的欧朋浏览器）对CSS3兼容的不太好。我测试的是最新版本7.2.2。而且，我发现，不只是对CSS3不支持，而且对line-height的属性的解析与其他浏览器也是不相同的。

虽然，Opera的新版手机浏览器马上就要发布了，这是Opera的第一款基于Webkit的手机客户端浏览器。显然，这是个好消息，尤其对于做前端的我们，webkit家族的壮大，就意味着我们在测试兼容性的考虑范围缩小，工作量会相应的减少。

不过，我觉得还是有必要搞清楚这个情况，下面我简单总结一下对其的新认识。



第一，对CSS3的选择器和类似header、nav、footer等标签不兼容，在不使用插件和JS处理的情况下，从纯CSS的角度来切入，我们可以采用类名来做定义，这是常用的替代方案。我的项目中，针对元素背景不支持颜色渐变的情况，折中的方案是给其一个最合适的背景色，这样使得背景色和文字颜色能有个基本的对比和区分，不至于影响用户的阅读和正常浏览。

例如：

header.sub-hd{ 
	position:relative; 
	height:40px; 
	background-image:-moz-linear-gradient(top, #13b9fd, #0183c3); 
	background-image:-o-linear-gradient(top, #13b9fd, #0183c3); 
	background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#13b9fd),color-stop(1,#0183c3)); 
	box-shadow:inset 0 1px 4px #6cd5ff; 
	-moz-box-shadow:inset 0 1px 4px #6cd5ff; 
	-webkit-box-shadow:inset 0 1px 4px #6cd5ff; 
	text-align:center; 
	font-size:15px;
	background-color:#099ddf;/*opera mobile不支持渐变的折中方案*/
}

针对IE6不识别html5标签的方法

<script>
(function(){
    var e ="abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;
    while(i--){
        document.createElement(e[i]);
    }
})();
</script>

第二，我们经常使用line-height属性，定义行高，尤其是需要设置垂直居中的时候，常常让height属性与line-height属性相同。而且其是可以继承的，一篇文章的父标签定义了行高属性，其子段落元素就不需要再次进行声明。可是，也有例外的情况。比如在Opera Mobile浏览器，就必须要再次声明，才能生效。

下面看例子：

html代码

<div class="test"><h2>测试标题在Opera Mobile下的宽高</h2></div>

CSS代码

<style>
.test{width:100%;height:40px;line-height:40px!important;background-color:black;color:#eee; opacity:0.5;}
.test h2{border:1px solid red;}
</style>

从手机上看页面效果：不居中！！！

通过观察红色边框大小，知道内标签h2的呈现高度与实际呈现的line-height一致，都不是我们父div定义的数值。

然后，我们给h2加上line-height属性值，可以设置为line-height:inherit或者line-height:40px;

CSS代码：

<style>
.test{width:100%;height:40px;line-height:40px!important;background-color:black;color:#eee; opacity:0.5;}
.test h2{line-height:inherit;border:1px solid red;}
</style>

查看效果，竟然没有变化，依然没有垂直居中。这是为什么呢？

想起以前看的一篇介绍浏览器机制的文章，莫非是浏览器自身默认的属性优先级高过了当前的属性优先级。我们更改一下优先级试试：

<style>
.test{width:100%;height:40px;line-height:40px!important;background-color:black;color:#eee; opacity:0.5;}
.test h2{line-height:inherit!important;border:1px solid red;}
</style>

再看，果然可以了。垂直居中了。

由此我们页可以
印证另一种说法：对于一个空容器，写入内容容器被撑开有了高度宽度，但实际上根本不是文字撑开了div的高度，而是line-height属性。

CSS中起高度作用的主要是height以及line-height了吧！如果一个标签没有定义height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用，即使是IE6下11像素左右默认高度bug也是如此。

至于
内部的机理，看这里很形象的表述：

到底这个line-height行高怎么就产生了高度呢？在inline box模型中，有个line boxes，这玩意是看不见的，这个玩意的工作就是包裹每行文字。一行文字一个line boxes。例如“艾佛森退役”这5个字，如果它们在一行显示，你艾佛森再牛逼，对不起，只有一个line boxes罩着你；但“春哥纯爷们”这5个字，要是竖着写，一行一个，那真是够爷们，一个字罩着一个line boxes，于是总计五个line boxes。line boxes什么特性也没有，就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。

其实line boxes不是直接的生产者，属于中层干部，真正的活儿都是它的手下 – inline boxes干的，这些手下就是文字啦，图片啊，span之类的inline属性的标签啦。line boxes只是个考察汇报人员，考察它的手下谁的实际line-height值最高，谁最高，它就要谁的值，然后向上汇报，形成高度。例如，<span style=”line-height:20px;”>取手下line-height<span style=”line-height:40px;”>最高</span>的值</span>。则line boxes的高度就是40像素了。

虽然所有浏览器都支持 line-height 属性。但是任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。因此在实际中，我们最好还是用数值定义line-height。

在本例中即为

<style>
.test{width:100%;height:40px;line-height:40px!important;background-color:black;color:#eee; opacity:0.5;}
.test h2{line-height:40px!important;border:1px solid red;}
</style>

当然，
还有一种折中的办法，可以将内容高度设为浏览器默认行高差不多的数值，其余不足的用padding补齐，这样在Opera mobile下，继承浏览器的21px默认行高，就不需要通过加important标记覆盖浏览器默认值了。同时，在其他标准浏览器我们为其子元素指定一个同样的行高，这样就能做到暂时兼容opera mobile 和其他所有标准的浏览器

浏览器默认行高各不相同，一般范围在16px~21px之间。

我的例子：

<header class="sub-hd">
	<div class="tit">应用信息</div>
</header>

header.sub-hd{ 
	position:relative; 
	/*height:40px;*/
	height:21px;
	padding:9px 0; 
	background-image:-moz-linear-gradient(top, #13b9fd, #0183c3); 
	background-image:-o-linear-gradient(top, #13b9fd, #0183c3); 
	background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#13b9fd),color-stop(1,#0183c3)); 
	box-shadow:inset 0 1px 4px #6cd5ff; 
	-moz-box-shadow:inset 0 1px 4px #6cd5ff; 
	-webkit-box-shadow:inset 0 1px 4px #6cd5ff; 
	text-align:center; 
	font-size:15px;
	background-color:#099ddf;/*opera mobile不支持渐变的折中方案*/
}
header .tit{ 
	-webkit-box-sizing:border-box; 
	position:absolute; 
	left:50%; 
	width:150px; 
	/*height:39px;line-height:39px; */
	line-height:21px; 
	margin-left:-75px; 
	color:#fff; 
	text-shadow:0 1px 0 #333; 
	font-weight:bold; 
	overflow:hidden; 
	font-size:18px;
}

当然这种办法并不是最佳的解决途径，只是权宜之计。最好还是采用上面的优先级设定，通用。

终于搞定了。是吧！！这下是不是就完美了呢？

不，
还是有问题！！

原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。


行高
指的是文本行的基线间的距离。而基线（Base line），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下 端沿，同时还有文字的顶线（Top line）、中线（Middle line）和底线（Bottom line），用以确定文字行的位置


行高与字体尺寸的差称为行距（leading）

使用行高代替高度避免haslayout：在某些情形下，line-height可以和height互换，因为实现的效果一样。都能撑开一个高度，然而这两个css属性有一个较隐蔽的差异，就是使用height会使标签haslayout，而使用line-height则不会。以前只有IE6的时候曾流行使用height清除浮动，就是利用了IE下height使haslayout的属性。但有时候，haslayout并不需要，反而要避免。

或许是是习惯，我们都喜欢给line-height带单位，但是在一些情况下会出现问题，看例子：

<style type="text/css">
.demo{line-height:150%;}
pre{font-size:30px;}
</style>
<div class="demo">
    <pre>
    第一行
    第二行
    </pre>
</div>

在电脑上，我们会发现，两行文字发生了重叠。为什么带单位的line-height继承，有可能会发生重叠的现象呢？

如果line-height属性值有单位，那么继承的值则是换算后的一个具体的px级别的值；而如果属性值没有单位，则浏览器会直接继承这个“因子（数值）”，而非计算后的具体值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。

上例中的div的line-height为150%，由于默认情况的字体大小为16px，所以div的具体line-height值可换算为16px*150%=24px，由于pre的line-height会继承24px这个换算过后的具体值，此时pre又被重新定义了font-size:30px;字体大小超过了line-height的大小，于是发生重叠。其它单位原理一样。

因此建议，
养成给line-height不带单位的习惯，如line-height:1.5;这种写法避免重叠。

在显示文章的box里，px的表示方法首先是要被淘汰的。因为文章里面的文字是有大有小的，使用px定值，由于继承性，无法实现根据文字大小自动调整间距，会出现大号文字重叠的现象。normal也是不行的，一般文章显示最好是650像素的宽度，1.5倍的行距较好。一般浏览器的normal值在1~1.2之间，使用normal必然文字间距过小，阅读吃力。百分值也有继承性，但是有个很搓的办法可以实现文字间距自动适应于文字的大小，那就是使用“*”通配符，例如：.article_box *{line-height:150%;}就不会出现文字重叠的情况了。网易博客就是使用的这个方法

想了解更多扩展可查看各位大侠博客
《css行高line-height的一些深入理解及应用》
《line-height 和 vertical-align 行高与行对齐精解 （图文） _CSS教程_CSS_网页制作_脚本之家》
《CSS for Mobile Browsers : CSS Techniques》
《CSS中文字体对照表》