7.3 行高：line-height屬性[3]

7.3.4 瀏覽器的差別與錯誤 瀏覽器在顯示的時候往往會有自己的表現形式，例如在Opera內，行高將按照CSS定義的將行距除以2增加到內容區域的上下兩邊，而IE和Firefox則不是完全平分，如圖7-29所示。

圖7-29 不同瀏覽器對行高的顯示 不過，相差的1至2個像素在實際顯示中一般不會有太大的影響，因此可以忽略不計。 比較嚴重的錯誤是IE 6.0對於含有圖片或者表單元等可替換行內元素的行高失效的問題，不過，在IE 7.0中已經修正了這個錯誤，但是其表現同其它瀏覽器也不相同。例如有如下代碼，其顯示如圖7-30所示。

#lineHeight4 p { line-height : 60px; } #lineHeight4 fieldset{ border : 0; } <div id="lineHeight4">   <p>內容含有圖片在[IE 6]內瀏覽line-height將失效。<img src="../../img/ddcat_anim.gif" alt="圖片" width="88" height="31" /></p>   <form id="testForm" action="#">     <fieldset>           <p><label for="test1">表單元素</label>< input type="text" maxlength="16" value="IE6內行高失效" /></p>         </fieldset>   </form> </div>

  圖7-30 包含替換元素的行高在IE內失效 由圖7-30讀者可以發現，IE 7.0中，將半行距分別加在了圖片的上下，而由於圖片默認是基線對齊，因此文字的基線下移了，這顯然不符合CSS中的規定。 對於IE 6.0中行高失效的問題，需要使用CSS Hack手段來針對IE 6.0設定替換元素的上下補白來修正。

提示：關於針對IE 6的CSS Hack，請參見本書[第16章：瀏覽器與Hack]。

7.3.5 應用：單行文字在垂直方向居中 在網頁設計中，往往爲了突出標題而添加背景圖案，如圖7-31所示。

圖7-31 包含背景圖片的標題 假設此標題的XHTML代碼如下：

<div id=”#sample”> <h2>熱門帖大盤點</h2> …… </div>

此時如果只設定<h2>的背景圖片和高，則文字會偏上，如圖7-32所示。

圖7-32 未設定行高的標題文字 針對這個現象，一般只需要設定與高度相等的行高即可，相關代碼如下：

#sample h2 { height : 31px; line-height : 31px;  …… }

此時在瀏覽器內文字已經在垂直位置上居中顯示，如圖7-33所示。

圖7-33 設定行高後的標題文字 此方法同樣可以運用在其他需要文字垂直居中顯示的地方，例如列表項、導航條等等。