13  標準網頁佈局的相容性處理

標準網頁設計的最大挑戰不在於技術本身，而在於瀏覽器相容性處理。所謂瀏覽器相容問題，就是當我們使用不同的瀏覽器（如IE 7、IE 6、Firefox等）訪問同一個頁面時，可能會出現不一致的情況，出現這種現象的原因有很多種，但根本原因就是瀏覽器對於技術支援的標準不同造成的。

IE瀏覽器對於標準技術的支援是很不完善的，這些問題可以分為兩種：一種是IE支援某種技術或功能，但是實現該功能的方法和途徑與標準技術不同；另一種是IE瀏覽器自身的解析機制存在很多Bug，導致頁面解析效果與標準不同。

本章將兼顧IE 6、IE 7和FF三種主流版本或型別瀏覽器進行講解，其中IE 6瀏覽器使用者數最多，IE 7的使用者將逐步超越和代替IE 6，而FF瀏覽器代表了標準瀏覽器的主流。

1  相容不同型別瀏覽器的基本方法

不同型別瀏覽器對於CSS技術的支援是不完全統一的，如果再加上瀏覽器對於CSS解析時存在各種Bug，CSS相容性處理就變得異常複雜。

解決瀏覽器相容問題的方法，這些方法被稱之為Hack（即補丁的意思）。所謂Hack，就是利用各種過濾方法專門為特定型別瀏覽器定義樣式，即稱之為過濾器（Filter），從而實現在不同型別瀏覽器中呈現相同的渲染效果。

過濾器是一種形象的稱呼，實際上它就是各種瀏覽器支援或不支援某種宣告或樣式的特殊用法。例如，IE 6以下版本瀏覽器不支援!important關鍵字，我們就可以利用這個關鍵字專門為IE 6及其以上版本瀏覽器或者非IE瀏覽器定義樣式，從而過濾掉IE 6以下版本瀏覽器在解析時存在的問題。

2

1  標準網頁佈局的相容性處理

1.1  常用過濾器

目前全球設計師發現並總結出來的過濾器非常多，要記住這些過濾器是很繁瑣的，讀者可以參閱http://centricle.com/ref/css/filters/

3

1  標準網頁佈局的相容性處理

1.1  常用過濾器

http://www.communis.co.uk/dithered/css_filters/css_only/index.html

4

1  標準網頁佈局的相容性處理

1.1  常用過濾器

IE 7版本瀏覽器專用過濾器

如果專門為IE 7版本瀏覽器定義樣式，則可以使用如下過濾器。該過濾器還可以相容即將上市的IE 8版本瀏覽器。

<style type="text/css">

*+html body {

background:blue;

}

</style>

相容原理：

“*”符號在IE瀏覽器中被認為是根節點，所以它可以包含html元素，而對於非IE瀏覽器來說，文件根節點應該是html，而不是“*”，所以當使用“*”通用符號包含html元素時，非IE瀏覽器會認為它是非法的，從而忽略這個選擇器所定義的樣式。同時IE 6及其以下版本瀏覽器不支援相鄰選擇器（+），所以也會忽略該選擇器定義的樣式。

5

1  標準網頁佈局的相容性處理

1.1  常用過濾器

IE 6及其以下版本瀏覽器專用

<style type="text/css">

* html body {

background:red;

}

</style>

不過從語法角度分析，IE 7應該支援*通用符號包含html元素，但事實上並不支援，所以這也是一個很有趣的過濾器。

6

1  標準網頁佈局的相容性處理

1.1  常用過濾器

IE 7和非IE瀏覽器專用

<style type="text/css">

html>body {

background:green;

}

</style>

相容原理：

因為IE 6及其以下版本瀏覽器不支援子選擇器，所以會忽略該過濾器定義的樣式。

7

1  標準網頁佈局的相容性處理

1.1  常用過濾器

非IE瀏覽器專用

style type="text/css">

html>/**/body {

background:yellow;

}

</style>

在IE 8中存在問題，需要使用其他方法。

8

1  標準網頁佈局的相容性處理

1.2  使用IE條件語句過濾

IE條件語句是IE瀏覽器自定義的一套邏輯語句，利用這些語句可以更加有效的為IE系列版本瀏覽器定義樣式。

IE條件語句實際上就是HTML註釋語句，只不過在註釋識別符號中增加了一組關鍵字，這一組關鍵字對於IE瀏覽器來說是有效的，但是對於其他瀏覽器來說，則被視為註釋資訊完全忽略。由於IE瀏覽器能夠根據條件語句中設定的條件決定解析的版本，從而實現利用條件為不同IE版本瀏覽器定義樣式的目的。

<!--[if IE]>

<h1>所有IE版本瀏覽器可識別</h1>

<![endif]-->

9

1  標準網頁佈局的相容性處理

1.2  使用IE條件語句過濾

IE條件語句以中括號（[]）為起止識別符號，其中包含一個條件語句。條件語句放在註釋識別符號內，且與註釋識別符號內部相鄰，語法格式如上面示例。

在條件語句中可以增加修飾性關鍵字，如lte、lt、gte、gt和!，這些關鍵字作用說明如下：

lte：小於或等於某個版本的IE瀏覽器。

lt：小於某個版本的IE瀏覽器。

gte：大於或等於某個版本的IE瀏覽器。

gt：大於某個版本的IE瀏覽器。

!：不等於某個版本的IE瀏覽器。

10

2  流動佈局的相容性處理

不同瀏覽器對於CSS的解析是不同的，這種不同源自不同瀏覽器的解析機制不同，所以在設計之初讀者就應該養成良好的相容處理習慣，學會直面主流瀏覽器存在不不相容性問題，避免後面相容處理的難度和成本。

目前市場上不同型別或版本的瀏覽器很多，但是如果從使用者數、標準度等方面來比較，其實瀏覽器市場僅包括兩大型別：IE型別和非IE型別瀏覽器。當大家提及某個頁面不相容，或者出現佈局問題，多因為它無法相容標準瀏覽器，或者僅支援IE瀏覽器。而非IE瀏覽器多建立在標準解析機制之上，所以它們都能夠很好支援標準。

本章將以FF（Firefox）瀏覽器作為非IE的代表，

11

2  流動佈局的相容性處理

2.1  關於不同瀏覽器的預設值問題

提及頁邊距，IE瀏覽器預設為body元素的margin-left屬性進行定義，預設值約為10畫素；而對於FF瀏覽器來說，預設為body元素的padding-left屬性進行定義，預設值約為8畫素。與此類似的預設值差異設定還包括：

列表樣式：IE預設使用margin-left屬性定義，值約為40畫素；而FF預設使用padding-left屬性定義，值約為40畫素。

網頁居中樣式：IE預設使用text-align屬性，值為center；而FF預設使用margin屬性，設定左右邊界為auto。

滑鼠指標樣式：IE預設使用cursor屬性定義，值為hand；而FF預設使用cursor屬性，值為pointer。

12

2  流動佈局的相容性處理

2.2  列表相容性處理—有序列表高度問題

所謂有序列表高度問題：就是當為有序列表定義高度時，列表序號將顯示無效。該現象存在於所有版本的IE瀏覽器中，非IE瀏覽器不存在該問題。

如果定義專案符號為拉丁字母等其他有序符號，在IE中會統一顯示為點號專案符號，而在非IE下會顯示為定義的字母序號顯示。

解決方法：

避免使用height定義列表項的高度，改為line-height屬性間接定義高度。

2  流動佈局的相容性處理

2.3  列表相容性處理—列表寬度問題

這個問題存在於所有版本的IE瀏覽器中。當為列表框定義一個寬度時，在某種情況下，專案符號會突然消失，而在非IE下卻能夠正常顯示。

方法一，定義專案符號位置在內部顯示。

方法二，為列表項定義左側邊界大小為2個字型寬度。

方法三，為列表框定義左側補白為2個字型寬度。

2  流動佈局的相容性處理

2.4  列表相容性處理—專案符號變異問題

這個問題存在於所有版本的IE瀏覽器中。當為列表結構中某列表項定義寬度或高度等特殊屬性時，有序專案符號會發生混亂，而在非IE下卻能夠正常顯示。

對於此類問題目前還沒有好的方法，不過可以通過間接方法來實現。也就是說如果要定義列表項的寬度，不妨給列表項包裹一個外套，然後為外套定義寬度來實現。但是這樣做會破壞列表結構的語義性，最佳方法應該是避免為列表項定義高度和寬度，除非不隱藏專案符號的顯示。

還有一種方法：取消列表結構的預設專案符號，使用背景影象來定義專案符號，這種做法會更為靈活和個性。

2  流動佈局的相容性處理

2.5  列表相容性處理—列表行雙倍高度問題

個問題存在於IE 6及其以下版本瀏覽器中。當為列表項中巢狀超連結元素，且定義超連結（a元素）為塊狀顯示（塊狀顯示的目的是可以定義超連結的大小），這時在IE 6及其以下版本瀏覽器中列表行會顯示雙倍高度，而在IE 7和非IE下卻能夠以正常行高顯示。

方法一，為列表項定義寬度、高度或邊框。

li {border-bottom:1px solid #CCC;}         /* 增加底邊線  */

或者

li { width:100%;}       /* 滿寬顯示 */

或者

li { height:1.1em;} /* 以行高大小定義高度 */

16

2  流動佈局的相容性處理

2.5  列表相容性處理—列表行雙倍高度問題

方法二，使用zoom屬性。

zoom是IE的私有屬性，它能夠定義元素的縮放比列。但是它也能夠使列表項恢復到正常行高。例如，下面程式碼可以輕鬆修正列表項的雙倍行高問題，且對於其他版本瀏覽器沒有副作用。

17

2  流動佈局的相容性處理

2.6  列表相容性處理—列表項錯行問題

這個問題存在於FF瀏覽器中。當為列表項中巢狀塊狀元素，且專案符號在內部顯示時，FF瀏覽器中會出現錯行問題，而在IE等其他瀏覽器中卻不會出現這類問題。

方法一，定義專案符號顯示在列表項的外面。

如果顯示在列表項內部，FF會根據塊狀元素僅能夠在一行內顯示的原則，從而錯行顯示。此時即使定義塊元素寬度不為100%，它也會錯行顯示。

li a{/* 列表項包含的塊元素 */

display:block; /* 塊狀顯示 */

width:80%; /* 寬度 */

}

18

2  流動佈局的相容性處理

2.6  列表相容性處理—列表項錯行問題

方法二，定義塊元素為行內塊狀顯示，可以清除塊狀佔據一行的問題。

li a{/* 列表項包含的塊元素 */

display:inline-block; /* 行內塊狀顯示，清除滿行顯示 */

}

19

2  流動佈局的相容性處理

2.7  預設高度問題

這個問題存在於IE 6及其以下版本瀏覽器中。當定義元素的高度小於元素預設行高時，高度將始終保持預設行高。

解決方法：

定義元素內字型大小為0，這樣就清除了行高對於高度的影響。但是不能夠定義行高為0，因為字型大小預設為16畫素，所以還會影響高度設定，而當字型大小為0時，行高也就沒有了。

#bar {font-size:0;}

20

2  流動佈局的相容性處理

2.7  預設高度問題

如果就這個問題繼續探索。當我們定義元素高度為1畫素時，則你又會發現：在IE 6及其以下版本中顯示為2畫素高度，而IE 7和非IE下顯示為1畫素。

使用CSS定義的overflow屬性來裁切多出的高度，程式碼如下。

#bar {overflow:hidden;} /* 裁切多出區域 */

21

2  流動佈局的相容性處理

2.8  盒模型高和寬的計算問題

這個問題存在於IE 5.5及其以下版本瀏覽器中。IE 5.5及其以下版本瀏覽器認為height和width屬性應該包含內容區域的大小、補白區域大小和邊框區域大小，通俗說就是元素實際顯示的大小。而根據CSS標準，height和width屬性值不應該包含補白區域大小和邊框區域大小，它僅代表內容區域的大小。

解決此問題方法有多種，但最安全、有效的方法就是使用IE條件語句。把IE條件語句放在原來樣式表的底部即可（程式碼如下），這樣就在IE 5.5及其以下版本瀏覽器中顯示與IE 6等其他版本瀏覽器相同的大小效果。

22

2  流動佈局的相容性處理

2.9  最小高度和寬度問題

這個問題存在於IE 6及其以下版本瀏覽器中，準確說這個問題不是Bug，而只是暫時功能不支援，或者說不完善，即IE 6及其以下版本瀏覽器不支援min-height和min-width屬性的問題。

所以，解決方法是：專門為IE 6及其以下版本瀏覽器定義一個高度，具體程式碼如下：

* html #box {/* IE6及其以下版本瀏覽器過濾器 */

height:100px;                                                         /* 定義高度為100畫素 */

}

23

2  流動佈局的相容性處理

2.10  超連結相容處理—失控的子標籤問題

這個問題存在於IE 6及其以下版本瀏覽器中。當在超連結中巢狀一個子標籤時，如果希望利用超連結來動態控制子標籤的顯示樣式，就會出現控制失效問題。

這個問題是IE 6及其以下版本瀏覽器解析超連結的機制造成的，解決方法是：在超連結的滑鼠經過狀態時定義一個高度，由於a元素預設為行內元素，定義高度後不會影響其顯示，但定義高度之後能夠觸發它正確解析子標籤<span>的顯示或隱藏。

24

2  流動佈局的相容性處理

2.11  超連結相容處理—背景影象代替文字問題

超連結a元素預設為行內顯示，由於行內元素不識別盒模型的寬度和高度，所以當為它定義大小時是無效的。如果我們希望使用背景影象來代替超連結文字就會存在很大的問題，實際上設計師經常要面臨這樣的問題，因為使用背景影象能夠設計更具個性的超連結效果。

這種方法利用補白來間接定義元素的大小，並藉助font-size屬性來間接隱藏字型，從而實現背景影象代替文字的設計效果。

25

3  浮動佈局的相容性處理

3.1  浮動被流動包含問題

這是所有瀏覽器都存在的問題，即當一個自然流到的元素包含一個浮動的元素時，則包含元素會自動收縮，而不是被浮動元素撐開。既然所有瀏覽器都有這個問題，那麼法不責眾，這個問題也就算不上問題了，或者說它僅是一種現象。

解決方法：

可以使用增加清除浮動元素，強制包含框張開以包含浮動的子元素。

26

3  浮動佈局的相容性處理

3.1  浮動被流動包含問題

但是如果在IE 6及其以下版本中不完全支援這種方法。而更有趣的是，如果在IE 7瀏覽器中改變視窗寬度小於包含的浮動元素所定義的寬度時，你會發現包含框所定義的背景色突然沒有了，真是讓人莫名其妙。

方法：

#wrap { /* 包含框樣式 */

background:#FFCCFF;

zoom:1; /* 使用私有屬性縮放100%來觸發佈局 */

}

或者：

#wrap { /* 包含框樣式 */

background:#FFCCFF;

border:solid 1px red;      /* 定義邊框來觸發佈局 */

}

27

3  浮動佈局的相容性處理

3.2  包含框不能自適應高度的問題

這個現象本應屬於流動佈局問題，因為與上一節示例存在問題有點類似，故放在這兒進行講解。該問題存在於所有瀏覽器中。當為包含框內的元素定義上下邊界時，包含框不能夠自適應高度以包含子物件。

存在原因：

如果巢狀元素的邊界沒有被相互阻隔，則就會出現邊界重疊現象。例如，被包含元素的上邊界會自動與包含框的上邊界重疊，被包含元素的下邊界會自動與包含框的下邊界重疊。

解決方法：

為包含框定義邊框或者補白，從而阻斷相互巢狀元素的上下邊界接觸，防止發生重疊現象，則阻斷邊界接觸。

28

3  浮動佈局的相容性處理

3.3  浮動佈局中欄目內容被隱藏的問題

這個問題存在於IE 6及其以下版本瀏覽器中。有人把這個問題稱之為躲貓貓或捉迷藏。之所以這樣稱呼，是因為在特定條件下欄目內容看起來消失了，只有重新重新整理頁面時才能夠出現，或者用滑鼠拖選可以使其顯示。

29