瀏覽器兼容性問題及常見的解決方法_html/css_WEB-ITnose

瀏覽器兼容性問題又稱網(wǎng)頁兼容性和網(wǎng)站兼容性問題，指網(wǎng)頁在各種瀏覽器上的顯示效果可能不一致二產(chǎn)生瀏覽器和網(wǎng)頁間的兼容問題。在網(wǎng)站的設(shè)計(jì)和制作中，做好瀏覽器兼容，才能夠讓網(wǎng)站在不同的瀏覽器下都正常顯示。而對于瀏覽器軟件的開發(fā)和設(shè)計(jì)，瀏覽器對標(biāo)準(zhǔn)的更好兼容能夠給用戶更好的使用體驗(yàn)。

二.瀏覽器兼容性問題產(chǎn)生原因

因?yàn)椴煌瑸g覽器使用內(nèi)核及所支持的HTML等網(wǎng)頁語言標(biāo)準(zhǔn)不同；以及用戶客戶端的環(huán)境不同（如分辨率不同）造成的顯示效果不能達(dá)到理想效果。最常見的問題就是網(wǎng)頁元素位置混亂，錯(cuò)位，顯示不出。

三.常見的瀏覽器兼容性問題及解決方法

1.不同瀏覽器標(biāo)簽?zāi)J(rèn)的外邊距和內(nèi)邊距不同（這是最常見也是最容易解決的）。

問題狀況：隨便寫幾個(gè)標(biāo)簽，在不加樣式控制的情況下，不同瀏覽器的margin和padding的差異較大。

解決方法：在css里使用：*{margin:0px; padding:0px}。

2.塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大。

問題狀況：后面的塊屬性標(biāo)簽被頂?shù)较乱恍小?/p>

解決方法：在float的標(biāo)簽樣式中加入:display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。

3.設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6、IE7，遨游中高度超出自己設(shè)置的高度。

問題狀況：IE6、7和遨游里這個(gè)表情的高度不熟控制，超出自己設(shè)置的高度。

解決方法：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height小于你設(shè)置的高度。

4.行內(nèi)屬性標(biāo)簽，設(shè)置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug。

問題狀況：IE6里間距比超過設(shè)置的間距。

解決方法：在display:block;后面加入display:inline;display:table;

5.圖片默認(rèn)有間距。

問題狀況：幾個(gè)img標(biāo)簽放在一起的時(shí)候，有些瀏覽器會有默認(rèn)的間距，加了問題一中提到的通配符也不起作用。

解決方法：使用float為img布局。

6.標(biāo)簽最低高度設(shè)置min-height步兼容。

問題狀況：因?yàn)閙in-height本身就是一個(gè)不兼容的css屬性，所以設(shè)置min-height時(shí)不能很好的被給瀏覽器兼容。

解決方法：如果我們要設(shè)置一個(gè)標(biāo)簽的最小高度為200px，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto; !important; height:200px; overflow:visible;}。

7.透明度的兼容css設(shè)置。

做兼容頁面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當(dāng)然熟練到一定的程度就沒這么麻煩了。建議經(jīng)常會碰到兼容性問題的新手使用。很多兼容性問題都是因?yàn)闉g覽器對標(biāo)簽的默認(rèn)屬性解析不同造成的，只要我們稍加設(shè)置都能輕松地解決這些兼容問題。如果我們熟悉標(biāo)簽的默認(rèn)屬性的話，就能很好的理解為什么會出現(xiàn)兼容問題以及怎么去解決這些兼容問題。

1. /* CSS hack*/

我很少使用hacker的，可能是個(gè)人習(xí)慣吧，我不喜歡寫的代碼IE不兼容，然后用hack來解決。不過hacker還是非常好用的。使用hacker我可以把瀏覽器分為3類：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）

◆IE6認(rèn)識的hacker 是下劃線_ 和星號 *

◆IE7 遨游認(rèn)識的hacker是星號 *

比如這樣一個(gè)CSS設(shè)置：

1. height:300px;*height:200px;_height:100px;

IE6瀏覽器在讀到height:300px的時(shí)候會認(rèn)為高時(shí)300px；繼續(xù)往下讀，他也認(rèn)識*heihgt， 所以當(dāng)IE6讀到*height:200px的時(shí)候會覆蓋掉前一條的相沖突設(shè)置，認(rèn)為高度是200px。繼續(xù)往下讀，IE6還認(rèn)識_height,所以他又會覆蓋掉200px高的設(shè)置，把高度設(shè)置為100px；

IE7和遨游也是一樣的從高度300px的設(shè)置往下讀。當(dāng)它們讀到*height200px的時(shí)候就停下了，因?yàn)樗鼈儾徽J(rèn)識_height。所以它們會把高度解析為200px，剩下的瀏覽器只認(rèn)識第一個(gè)height:300px;所以他們會把高度解析為300px。因?yàn)閮?yōu)先級相同且想沖突的屬性設(shè)置后一個(gè)會覆蓋掉前一個(gè)，所以書寫的次序是很重要的。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com