html5 兼容性問題

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

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

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

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

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

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

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

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

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

10、10像素；而對于FF瀏覽器來說，默認(rèn)為body元素的padding-left屬性進(jìn)行定義，默認(rèn)值約為8像素。與此類似的默認(rèn)值差異設(shè)置還包括：列表樣式：IE默認(rèn)使用margin-left屬性定義，值約為40像素；而FF默認(rèn)使用padding-left屬性定義，值約為40像素。網(wǎng)頁居中樣式：IE默認(rèn)使用text-align屬性，值為center；而FF默認(rèn)使用margin屬性，設(shè)置左右邊界為auto。鼠標(biāo)指針樣式：IE默認(rèn)使用cursor屬性定義，值為hand；而FF默認(rèn)使用cursor屬性，值為pointer。122  流動布局的兼容性處理2.2  列表兼容性處理有序列表高度

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

28、像素。FF等標(biāo)準(zhǔn)瀏覽器對于小數(shù)值一般采取忽略不計(jì)的方法，多出的值將按元素順序進(jìn)行分配。例如，包含框?qū)挾葹?1像素，平分為3個(gè)子元素，則每個(gè)子元素平分3像素，多出的2像素按順序分給第1、2個(gè)子元素。如果包含框?qū)挾葹?0像素，則每個(gè)子元素平分3像素，多出的1像素分給第1個(gè)子元素。3  浮動布局的兼容性處理3.5  半個(gè)像素問題解決方法：這是一個(gè)比較特殊的問題，最佳方法當(dāng)然是避免此類問題的出現(xiàn)，即不要設(shè)置包含框?qū)挾葹橐粋€(gè)奇數(shù)值。不過在布局中很多取值是無法預(yù)定的，所以使用下面這個(gè)方法是最安全的。即為包含的子元素定義清除右側(cè)浮動。13-44.html這樣它就能夠強(qiáng)迫所有的子元素并列顯

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