css中用于設(shè)置行高的屬性，line-height屬性。

第一，對CSS3的選擇器和類似header、nav、footer等標簽不兼容，在不使用插件和JS處理的情況下，從純CSS的角度來切入，可以采用類名來做定義，這是常用的替代方案。

項目中，針對元素背景不支持顏色漸變的情況，折中的方案是給其一個最合適的背景色，這樣使得背景色和文字顏色能有個基本的對比和區(qū)分，不至于影響用戶的閱讀和正常瀏覽。
例如：

針對IE6不識別html5標簽的方法
 

第二，我們經(jīng)常使用line-height屬性，定義行高，尤其是需要設(shè)置垂直居中的時候，常常讓height屬性與line-height屬性相同。而且其是可以繼承的，一篇文章的父標簽定義了行高屬性，其子段落元素就不需要再次進行聲明?？墒?，也有例外的情況。比如在Opera Mobile瀏覽器，就必須要再次聲明，才能生效。

例子：
1，html代碼

2，CSS代碼
 

從手機上看頁面效果：不居中！
通過觀察紅色邊框大小，知道內(nèi)標簽h2的呈現(xiàn)高度與實際呈現(xiàn)的line-height一致，都不是我們父div定義的數(shù)值。

然后，我們給h2加上line-height屬性值，可以設(shè)置為line-height:inherit或者line-height:40px;
1，CSS代碼：
 

查看效果，竟然沒有變化，依然沒有垂直居中。這是為什么呢？
莫非是瀏覽器自身默認的屬性優(yōu)先級高過了當前的屬性優(yōu)先級。

更改一下優(yōu)先級：

再看，果然可以了。垂直居中了。
由此我們頁可以印證另一種說法：對于一個空容器，寫入內(nèi)容容器被撐開有了高度寬度，但實際上根本不是文字撐開了div的高度，而是line-height屬性。
CSS中起高度作用的主要是height以及l(fā)ine-height了吧！如果一個標簽沒有定義height屬性(包括百分比高度)，那么其最終表現(xiàn)的高度一定是由line-height起作用，即使是IE6下11像素左右默認高度bug也是如此。

至于內(nèi)部的機理，看這里很形象的表述：

到底這個line-height行高怎么就產(chǎn)生了高度呢？在inline box模型中，有個line boxes，這玩意是看不見的，這個玩意的工作就是包裹每行文字。一行文字一個line boxes。例如“艾佛森退役”這5個字，如果它們在一行顯示，你艾佛森再牛逼，對不起，只有一個line boxes罩著你；但“春哥純爺們”這5個字，要是豎著寫，一行一個，那真是夠爺們，一個字罩著一個line boxes，于是總計五個line boxes。line boxes什么特性也沒有，就高度。所以一個沒有設(shè)置height屬性的div的高度就是由一個一個line boxes的高度堆積而成的。

其實line boxes不是直接的生產(chǎn)者，屬于中層干部，真正的活兒都是它的手下 – inline boxes干的，這些手下就是文字啦，圖片啊，span之類的inline屬性的標簽啦。line boxes只是個考察匯報人員，考察它的手下誰的實際line-height值最高，誰最高，它就要誰的值，然后向上匯報，形成高度。
例如：

則line boxes的高度就是40像素了。
雖然所有瀏覽器都支持 line-height 屬性。但是任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。因此在實際中，我們最好還是用數(shù)值定義line-height。

在本例中即為

當然，還有一種折中的辦法，可以將內(nèi)容高度設(shè)為瀏覽器默認行高差不多的數(shù)值，其余不足的用padding補齊，這樣在Opera mobile下，繼承瀏覽器的21px默認行高，就不需要通過加important標記覆蓋瀏覽器默認值了。同時，在其他標準瀏覽器我們?yōu)槠渥釉刂付ㄒ粋€同樣的行高，這樣就能做到暫時兼容opera mobile 和其他所有標準的瀏覽器

瀏覽器默認行高各不相同，一般范圍在16px~21px之間。

例子：
 

當然這種辦法并不是最佳的解決途徑，只是權(quán)宜之計。最好還是采用上面的優(yōu)先級設(shè)定，通用。

還是有問題！

先來溫習一下line-height屬性可能的值：
normal，默認。
number 數(shù)字，此數(shù)字會與當前的字體尺寸相乘來設(shè)置行間距。
length     設(shè)置固定的行間距。單位em，px，pt等等。
百分比% ，基于當前字體尺寸的百分比行間距。
inherit ，規(guī)定應(yīng)該從父元素繼承 line-height 屬性的值。

line-heignt不能是負數(shù)，line-height 屬性設(shè)置行間的距離（行高）。會影響行框的布局。在應(yīng)用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。

line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內(nèi)容的頂部和底部?？梢园@些內(nèi)容的最小框就是行框。

原始數(shù)字值指定了一個縮放因子，后代元素會繼承這個縮放因子而不是計算值。

行高指的是文本行的基線間的距離。而基線（Base line），指的是一行字橫排時下沿的基礎(chǔ)線，基線并不是漢字的下端沿，而是英文字母x的下 端沿，同時還有文字的頂線（Top line）、中線（Middle line）和底線（Bottom line），用以確定文字行的位置

行高與字體尺寸的差稱為行距（leading）

使用行高代替高度避免haslayout：在某些情形下，line-height可以和height互換，因為實現(xiàn)的效果一樣。都能撐開一個高度，然而這兩個css屬性有一個較隱蔽的差異，就是使用height會使標簽haslayout，而使用line-height則不會。以前只有IE6的時候曾流行使用height清除浮動，就是利用了IE下height使haslayout的屬性。但有時候，haslayout并不需要，反而要避免。

都喜歡給line-height帶單位，但是在一些情況下會出現(xiàn)問題，看例子：
 

兩行文字發(fā)生了重疊。
為什么帶單位的line-height繼承，有可能會發(fā)生重疊的現(xiàn)象呢？

如果line-height屬性值有單位，那么繼承的值則是換算后的一個具體的px級別的值；而如果屬性值沒有單位，則瀏覽器會直接繼承這個“因子（數(shù)值）”，而非計算后的具體值，此時它的line-height會根據(jù)本身的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的大小，于是發(fā)生重疊。其它單位原理一樣。

因此建議，養(yǎng)成給line-height不帶單位的習慣，如line-height:1.5;這種寫法避免重疊。

在顯示文章的box里，px的表示方法首先是要被淘汰的。因為文章里面的文字是有大有小的，使用px定值，由于繼承性，無法實現(xiàn)根據(jù)文字大小自動調(diào)整間距，會出現(xiàn)大號文字重疊的現(xiàn)象。normal也是不行的，一般文章顯示最好是650像素的寬度，1.5倍的行距較好。

一般瀏覽器的normal值在1~1.2之間，使用normal必然文字間距過小，閱讀吃力。
百分值也有繼承性，但是有個很搓的辦法可以實現(xiàn)文字間距自動適應(yīng)于文字的大小，那就是使用“*”通配符，例如：.article_box *{line-height:150%;}就不會出現(xiàn)文字重疊的情況了。