1、網頁設計html+css兼容性問題處理辦法匯總  標準網頁布局的兼容性處理標準網頁設計的最大挑戰不在于技術本身，而在于瀏覽器兼容性處理。所謂瀏覽器兼容問題，就是當我們使用不同的瀏覽器（如IE 7、IE 6、Firefox等）訪問同一個頁面時，可能會出現不一致的情況，出現這種現象的原因有很多種，但根本原因就是瀏覽器對于技術支持的標準不同造成的。IE瀏覽器對于標準技術的支持是很不完善的，這些問題可以分為兩種：一種是IE支持某種技術或功能，但是實現該功能的方法和途徑與標準技術不同；另一種是IE瀏覽器自身的解析機制存在很多Bug，導致頁面解析效果與標準不同。本章將兼顧IE 6、IE 7和FF

2、三種主流版本或類型瀏覽器進行講解，其中IE 6瀏覽器用戶數最多，IE 7的用戶將逐步超越和代替IE 6，而FF瀏覽器代表了標準瀏覽器的主流。1  兼容不同類型瀏覽器的基本方法不同類型瀏覽器對于CSS技術的支持是不完全統一的，如果再加上瀏覽器對于CSS解析時存在各種Bug，CSS兼容性處理就變得異常復雜。解決瀏覽器兼容問題的方法，這些方法被稱之為Hack（即補丁的意思）。所謂Hack，就是利用各種過濾方法專門為特定類型瀏覽器定義樣式，即稱之為過濾器（Filter），從而實現在不同類型瀏覽器中呈現相同的渲染效果。過濾器是一種形象的稱呼，實際上它就是各種瀏覽器支持或不支持某種聲明或樣式的特

3、殊用法。例如，IE 6以下版本瀏覽器不支持!important關鍵字，我們就可以利用這個關鍵字專門為IE 6及其以上版本瀏覽器或者非IE瀏覽器定義樣式，從而過濾掉IE 6以下版本瀏覽器在解析時存在的問題。21  標準網頁布局的兼容性處理1.1  常用過濾器目前全球設計師發現并總結出來的過濾器非常多，要記住這些過濾器是很繁瑣的，讀者可以參閱31  標準網頁布局的兼容性處理1.1  常用過濾器munis.co.uk/dithered/css_filters/css_only/index.html41  標準網頁布局的兼容性處理1.1  常

4、用過濾器IE 7版本瀏覽器專用過濾器如果專門為IE 7版本瀏覽器定義樣式，則可以使用如下過濾器。該過濾器還可以兼容即將上市的IE 8版本瀏覽器。<style type="text/css">*+html body background:blue;</style> 兼容原理：“*”符號在IE瀏覽器中被認為是根節點，所以它可以包含html元素，而對于非IE瀏覽器來說，文檔根節點應該是html，而不是“*”，所以當使用“*”通用符號包含html元素時，非IE瀏覽器會認為它是非法的，從而忽略這個選擇器所定義的樣式。同時IE 6及其以下版本瀏覽器不支

5、持相鄰選擇器（+），所以也會忽略該選擇器定義的樣式。51  標準網頁布局的兼容性處理1.1  常用過濾器IE 6及其以下版本瀏覽器專用 <style type="text/css">* html body background:red;</style> 不過從語法角度分析，IE 7應該支持*通用符號包含html元素，但事實上并不支持，所以這也是一個很有趣的過濾器。61  標準網頁布局的兼容性處理1.1  常用過濾器IE 7和非IE瀏覽器專用<style type="text/

6、css">html>body background:green;</style> 兼容原理：因為IE 6及其以下版本瀏覽器不支持子選擇器，所以會忽略該過濾器定義的樣式。71  標準網頁布局的兼容性處理1.1  常用過濾器非IE瀏覽器專用style type="text/css">html>/*/body background:yellow;</style> 在IE 8中存在問題，需要使用其他方法。  81  標準網頁布局的兼容性處理1.2 

7、; 使用IE條件語句過濾IE條件語句是IE瀏覽器自定義的一套邏輯語句，利用這些語句可以更加有效的為IE系列版本瀏覽器定義樣式。IE條件語句實際上就是HTML注釋語句，只不過在注釋標識符中增加了一組關鍵字，這一組關鍵字對于IE瀏覽器來說是有效的，但是對于其他瀏覽器來說，則被視為注釋信息完全忽略。由于IE瀏覽器能夠根據條件語句中設置的條件決定解析的版本，從而實現利用條件為不同IE版本瀏覽器定義樣式的目的。<!-if IE><h1>所有IE版本瀏覽器可識別</h1><!endif-> 91  標準網頁布局的兼容性處理1.2 

8、; 使用IE條件語句過濾IE條件語句以中括號（）為起止標識符，其中包含一個條件語句。條件語句放在注釋標識符內，且與注釋標識符內部相鄰，語法格式如上面示例。在條件語句中可以增加修飾性關鍵字，如lte、lt、gte、gt和!，這些關鍵字作用說明如下：lte：小于或等于某個版本的IE瀏覽器。lt：小于某個版本的IE瀏覽器。gte：大于或等于某個版本的IE瀏覽器。gt：大于某個版本的IE瀏覽器。!：不等于某個版本的IE瀏覽器。 102  流動布局的兼容性處理不同瀏覽器對于CSS的解析是不同的，這種不同源自不同瀏覽器的解析機制不同，所以在設計之初讀者就應該養成良好的兼容處理習慣，學會

9、直面主流瀏覽器存在不不兼容性問題，避免后面兼容處理的難度和成本。目前市場上不同類型或版本的瀏覽器很多，但是如果從用戶數、標準度等方面來比較，其實瀏覽器市場僅包括兩大類型：IE類型和非IE類型瀏覽器。當大家提及某個頁面不兼容，或者出現布局問題，多因為它無法兼容標準瀏覽器，或者僅支持IE瀏覽器。而非IE瀏覽器多建立在標準解析機制之上，所以它們都能夠很好支持標準。本章將以FF（Firefox）瀏覽器作為非IE的代表， 112  流動布局的兼容性處理2.1  關于不同瀏覽器的默認值問題提及頁邊距，IE瀏覽器默認為body元素的margin-left屬性進行定義，默認值約為

10、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。122  流動布局的兼容性處理2.2  列表兼容性處理有序列表高度

11、問題所謂有序列表高度問題：就是當為有序列表定義高度時，列表序號將顯示無效。該現象存在于所有版本的IE瀏覽器中，非IE瀏覽器不存在該問題。如果定義項目符號為拉丁字母等其他有序符號，在IE中會統一顯示為點號項目符號，而在非IE下會顯示為定義的字母序號顯示。 解決方法：避免使用height定義列表項的高度，改為line-height屬性間接定義高度。  2  流動布局的兼容性處理2.3  列表兼容性處理列表寬度問題這個問題存在于所有版本的IE瀏覽器中。當為列表框定義一個寬度時，在某種情況下，項目符號會突然消失，而在非IE下卻能夠正常顯示。方法一，定義

12、項目符號位置在內部顯示。方法二，為列表項定義左側邊界大小為2個字體寬度。方法三，為列表框定義左側補白為2個字體寬度。2  流動布局的兼容性處理2.4  列表兼容性處理項目符號變異問題這個問題存在于所有版本的IE瀏覽器中。當為列表結構中某列表項定義寬度或高度等特殊屬性時，有序項目符號會發生混亂，而在非IE下卻能夠正常顯示。對于此類問題目前還沒有好的方法，不過可以通過間接方法來實現。也就是說如果要定義列表項的寬度，不妨給列表項包裹一個外套，然后為外套定義寬度來實現。但是這樣做會破壞列表結構的語義性，最佳方法應該是避免為列表項定義高度和寬度，除非不隱藏項目符號的顯示。還有一種方法

13、：取消列表結構的默認項目符號，使用背景圖像來定義項目符號，這種做法會更為靈活和個性。2  流動布局的兼容性處理2.5  列表兼容性處理列表行雙倍高度問題個問題存在于IE 6及其以下版本瀏覽器中。當為列表項中嵌套超鏈接元素，且定義超鏈接（a元素）為塊狀顯示（塊狀顯示的目的是可以定義超鏈接的大小），這時在IE 6及其以下版本瀏覽器中列表行會顯示雙倍高度，而在IE 7和非IE下卻能夠以正常行高顯示。方法一，為列表項定義寬度、高度或邊框。li border-bottom:1px solid #CCC;       

14、0; /* 增加底邊線  */或者li width:100%;       /* 滿寬顯示 */或者li height:1.1em; /* 以行高大小定義高度 */  162  流動布局的兼容性處理2.5  列表兼容性處理列表行雙倍高度問題方法二，使用zoom屬性。zoom是IE的私有屬性，它能夠定義元素的縮放比列。但是它也能夠使列表項恢復到正常行高。例如，下面代碼可以輕松修正列表項的雙倍行高問題，且對于其他版本瀏覽器沒有副作用。 172  流動布局的兼容性處理2.

15、6  列表兼容性處理列表項錯行問題這個問題存在于FF瀏覽器中。當為列表項中嵌套塊狀元素，且項目符號在內部顯示時，FF瀏覽器中會出現錯行問題，而在IE等其他瀏覽器中卻不會出現這類問題。方法一，定義項目符號顯示在列表項的外面。如果顯示在列表項內部，FF會根據塊狀元素僅能夠在一行內顯示的原則，從而錯行顯示。此時即使定義塊元素寬度不為100%，它也會錯行顯示。li a/* 列表項包含的塊元素 */display:block; /* 塊狀顯示 */width:80%; /* 寬度 */ 182  流動布局的兼容性處理2.6  列表兼容性處理列表項錯行問題方法二，定

16、義塊元素為行內塊狀顯示，可以清除塊狀占據一行的問題。li a/* 列表項包含的塊元素 */display:inline-block; /* 行內塊狀顯示，清除滿行顯示 */  192  流動布局的兼容性處理2.7  默認高度問題這個問題存在于IE 6及其以下版本瀏覽器中。當定義元素的高度小于元素默認行高時，高度將始終保持默認行高。解決方法：定義元素內字體大小為0，這樣就清除了行高對于高度的影響。但是不能夠定義行高為0，因為字體大小默認為16像素，所以還會影響高度設置，而當字體大小為0時，行高也就沒有了。#bar font-size:0;202 

17、 流動布局的兼容性處理2.7  默認高度問題如果就這個問題繼續探索。當我們定義元素高度為1像素時，則你又會發現：在IE 6及其以下版本中顯示為2像素高度，而IE 7和非IE下顯示為1像素。使用CSS定義的overflow屬性來裁切多出的高度，代碼如下。#bar overflow:hidden; /* 裁切多出區域 */ 212  流動布局的兼容性處理2.8  盒模型高和寬的計算問題這個問題存在于IE 5.5及其以下版本瀏覽器中。IE 5.5及其以下版本瀏覽器認為height和width屬性應該包含內容區域的大小、補白區域大小和邊框區域大小，通俗說就是元素

18、實際顯示的大小。而根據CSS標準，height和width屬性值不應該包含補白區域大小和邊框區域大小，它僅代表內容區域的大小。解決此問題方法有多種，但最安全、有效的方法就是使用IE條件語句。把IE條件語句放在原來樣式表的底部即可（代碼如下），這樣就在IE 5.5及其以下版本瀏覽器中顯示與IE 6等其他版本瀏覽器相同的大小效果。222  流動布局的兼容性處理2.9  最小高度和寬度問題這個問題存在于IE 6及其以下版本瀏覽器中，準確說這個問題不是Bug，而只是暫時功能不支持，或者說不完善，即IE 6及其以下版本瀏覽器不支持min-height和min-width屬性的問題。所

19、以，解決方法是：專門為IE 6及其以下版本瀏覽器定義一個高度，具體代碼如下：* html #box /* IE6及其以下版本瀏覽器過濾器 */height:100px;                                     

20、;                    /* 定義高度為100像素 */ 232  流動布局的兼容性處理2.10  超鏈接兼容處理失控的子標簽問題這個問題存在于IE 6及其以下版本瀏覽器中。當在超鏈接中嵌套一個子標簽時，如果希望利用超鏈接來動態控制子標簽的顯示樣式，就會出現控制失效問題。這個問題是IE 6及其以下版本瀏覽器解析超鏈接的機制造成的，解決方法是：在超鏈接的鼠標經過

21、狀態時定義一個高度，由于a元素默認為行內元素，定義高度后不會影響其顯示，但定義高度之后能夠觸發它正確解析子標簽<span>的顯示或隱藏。 242  流動布局的兼容性處理2.11  超鏈接兼容處理背景圖像代替文本問題超鏈接a元素默認為行內顯示，由于行內元素不識別盒模型的寬度和高度，所以當為它定義大小時是無效的。如果我們希望使用背景圖像來代替超鏈接文本就會存在很大的問題，實際上設計師經常要面臨這樣的問題，因為使用背景圖像能夠設計更具個性的超鏈接效果。這種方法利用補白來間接定義元素的大小，并借助font-size屬性來間接隱藏字體，從而實現背景圖像代替文本的

22、設計效果。  253  浮動布局的兼容性處理3.1  浮動被流動包含問題這是所有瀏覽器都存在的問題，即當一個自然流到的元素包含一個浮動的元素時，則包含元素會自動收縮，而不是被浮動元素撐開。既然所有瀏覽器都有這個問題，那么法不責眾，這個問題也就算不上問題了，或者說它僅是一種現象。解決方法：可以使用增加清除浮動元素，強制包含框張開以包含浮動的子元素。 263  浮動布局的兼容性處理3.1  浮動被流動包含問題但是如果在IE 6及其以下版本中不完全支持這種方法。而更有趣的是，如果在IE 7瀏覽器中改變窗口寬度小于包含的浮動元素所定

23、義的寬度時，你會發現包含框所定義的背景色突然沒有了，真是讓人莫名其妙。方法：#wrap /* 包含框樣式 */background:#FFCCFF;zoom:1; /* 使用私有屬性縮放100%來觸發布局 */或者：#wrap /* 包含框樣式 */background:#FFCCFF;border:solid 1px red;      /* 定義邊框來觸發布局 */ 273  浮動布局的兼容性處理3.2  包含框不能自適應高度的問題這個現象本應屬于流動布局問題，因為與上一節示例存在問題有點類似，故放在這兒進行講解。該問題

24、存在于所有瀏覽器中。當為包含框內的元素定義上下邊界時，包含框不能夠自適應高度以包含子對象。存在原因：如果嵌套元素的邊界沒有被相互阻隔，則就會出現邊界重疊現象。例如，被包含元素的上邊界會自動與包含框的上邊界重疊，被包含元素的下邊界會自動與包含框的下邊界重疊。解決方法：為包含框定義邊框或者補白，從而阻斷相互嵌套元素的上下邊界接觸，防止發生重疊現象，則阻斷邊界接觸。 283  浮動布局的兼容性處理3.3  浮動布局中欄目內容被隱藏的問題這個問題存在于IE 6及其以下版本瀏覽器中。有人把這個問題稱之為躲貓貓或捉迷藏。之所以這樣稱呼，是因為在特定條件下欄目內容看起來消失了，

25、只有重新刷新頁面時才能夠出現，或者用鼠標拖選可以使其顯示。 293  浮動布局的兼容性處理3.3  浮動布局中欄目內容被隱藏的問題出現這個Bug的原因比較特殊，一般需要幾個前提條件：第一，包含框中包含有浮動元素和流動元素，且包含框定義了背景色。第二，浮動元素后面為一些流動元素，浮動元素的高度應該大于后面流動元素的高度。第三，在流動元素的下面是一個清除元素（即元素定義清除浮動屬性），或者是一個被定義了寬度且寬度足以促使元素只能夠顯示在浮動元素的底部，而不是環繞在浮動元素的兩側。當滿足上面三個條件，則中間的流動元素（環繞在浮動元素兩側的元素）看起來似乎消失了，原來它們

26、都隱藏到了父元素的背景后面，只有在刷新頁面時才重新出現。 3  浮動布局的兼容性處理3.3  浮動布局中欄目內容被隱藏的問題 方法一，學會在浮動元素后面增加清除元素。所謂清除元素，就是定義了clearr屬性的元素，這樣就可以避免浮動元素對后面布局的影響。方法二，在結構嵌套中應遵循最少的層次來滿足頁面設計需要，使頁面結構簡單，容易控制與管理，盡可能的減小由于不必要的嵌套引來的Bug。 3  浮動布局的兼容性處理3.4  同時設置邊界和浮動布局的問題這個問題存在于IE 6及其以下版本瀏覽器中。出現這個問題需要具備兩個前提條件：第

27、一，元素同時被定義了邊界和浮動顯示，且浮動方向和定義邊界方向在一個方向。第二，浮動邊相鄰的是一個流動元素或包含框，而不是浮動元素。當滿足這兩個條件之后，所定義的邊界會加倍顯示。解決該問題方法比較簡單：3  浮動布局的兼容性處理3.5  半個像素問題這個問題存在于所有IE瀏覽器版本中。我們知道像素值是沒有小數值的，但是當在布局中使用百分比設置單位，就會存在計算的像素值出現小數部分。對于小數值問題，不同類型瀏覽器取舍方法不同：IE將根據四舍五入的方法進行計算。例如，假設值為10.5像素，則IE在解析時會根據四舍五入的方法，計算為11像素，而對于值為10.4像素，則計算結果為10

28、像素。FF等標準瀏覽器對于小數值一般采取忽略不計的方法，多出的值將按元素順序進行分配。例如，包含框寬度為11像素，平分為3個子元素，則每個子元素平分3像素，多出的2像素按順序分給第1、2個子元素。如果包含框寬度為10像素，則每個子元素平分3像素，多出的1像素分給第1個子元素。3  浮動布局的兼容性處理3.5  半個像素問題解決方法：這是一個比較特殊的問題，最佳方法當然是避免此類問題的出現，即不要設置包含框寬度為一個奇數值。不過在布局中很多取值是無法預定的，所以使用下面這個方法是最安全的。即為包含的子元素定義清除右側浮動。13-44.html這樣它就能夠強迫所有的子元素并列顯

29、示。其實clear:right;聲明是一個比較神奇的工具，對于IE瀏覽器來說，不管所包含的子元素寬度有多大，它都能夠強迫子元素在同一行內顯示。3  浮動布局的兼容性處理3.6   3像素問題這個問題存在于IE 6及其以下版本瀏覽器中。當浮動元素與流動元素并列顯示時，它們之間會存在3像素的間距。解決方法：利用IE 6及其以下版本瀏覽器的過濾器，專門為它們定義樣式實現與標準瀏覽器的兼容。3  浮動布局的兼容性處理3.7  多出字符問題這個問題存在于IE 6版本瀏覽器中。當多個浮動元素中間夾雜有HTML注釋語句時，如果浮動元素寬度為100%，則就會在下面一行多顯示一個上一行最后一個字符。解決方法：可以清