兼容性問題(常見的瀏覽器兼容性解決方案)

常見的瀏覽器兼容性解決方案基于

目前網(wǎng)頁中的一些瀏覽器兼容問題可以通過CSS hack和瀏覽器Bug修復(fù)來解決。其中，CSS Hack指的是為特定瀏覽器編寫冗余代碼，是欺騙瀏覽器的行為，表示有更好的解決方案；瀏覽器Bug修復(fù)是指瀏覽器本身的Bug，利用CSS自身的屬性來修復(fù)瀏覽器顯示問題。所以瀏覽器Bug修復(fù)代碼是符合W3C標(biāo)準(zhǔn)的。建議可以通過瀏覽器Bug修復(fù)解決的兼容性問題，用這種方法解決。

以下是一些常見的瀏覽器兼容性問題和解決方案。

1.IE有條件注釋

在語法上:

1.…:用于聲明瀏覽器版本，其中使用了樣式表。

2.@import"test.css":使用導(dǎo)入樣式表。

2.子選擇器技巧

html >正文{

背景-圖片:URL(BG . wf)；

}

在語法上:

Html>body:對(duì)于IE6及以下版本，隱藏圖片bg.wf .

3.*HTML技巧

*html{

字體大小:14px

}

在語法上:

* html:IE6及以下設(shè)置字體大小為14px。

4.！重要的技巧

#nav{

字體大小:18px！重要；

字體大小:14px

}

在語法上:

字體大小:18px！重要提示:對(duì)于IE7及以上版本，請(qǐng)將字體大小設(shè)置為18px。

Font-size:14px:將IE6及以下版本的字體大小設(shè)置為14px。

5.IE6~IE8提示

IE6~IE8的竅門見表。

同時(shí)為多個(gè)瀏覽器設(shè)置CSS Hack時(shí)，一定要注意瀏覽器版本聲明的順序:高→低，即IE8 → IE7→E6。例如，如果標(biāo)簽中的文本大小在IE6中設(shè)置為14px，在IE7中設(shè)置為16px，在IE8中設(shè)置為18px，而在其他瀏覽器(如Firefox)中的字體大小設(shè)置為12px，則CSS代碼如下所示。

P{

字體大小:12px

font-size:18px \ 0；

*字體大小:16px

_ font-size:14px；

}

Font-size:12px:將所有瀏覽器的字體大小設(shè)置為12px。為所有瀏覽器設(shè)置的樣式總是放在第一位。

6.IE6 double 空白邊錯(cuò)誤修復(fù)

#nav{

浮動(dòng):左；

邊距:10px

顯示:內(nèi)嵌；

}

生成條件:對(duì)于一個(gè)元素，同時(shí)設(shè)置了float屬性和margin屬性。

顯示效果:IE6中，左右外邊距加倍，上下外邊距沒有效果。

解決方案:添加顯示:內(nèi)嵌；。

7.清除浮動(dòng)錯(cuò)誤修復(fù)

#父親{

寬度:100%；

溢出:隱藏；

}

生成條件:父元素未設(shè)置為float，而子元素設(shè)置為float。

顯示效果:父元素高度不展開，收縮成一條，子元素從容器溢出。

解決方案:為父元素設(shè)置width: width值；和溢出:隱藏；；。