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

瀏覽器兼容性問題又稱網頁兼容性和網站兼容性問題，指網頁在各種瀏覽器上的顯示效果可能不一致二產生瀏覽器和網頁間的兼容問題。在網站的設計和制作中，做好瀏覽器兼容，才能夠讓網站在不同的瀏覽器下都正常顯示。而對于瀏覽器軟件的開發和設計，瀏覽器對標準的更好兼容能夠給用戶更好的使用體驗。

二.瀏覽器兼容性問題產生原因

因為不同瀏覽器使用內核及所支持的HTML等網頁語言標準不同；以及用戶客戶端的環境不同（如分辨率不同）造成的顯示效果不能達到理想效果。最常見的問題就是網頁元素位置混亂，錯位，顯示不出。

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

1.不同瀏覽器標簽默認的外邊距和內邊距不同（這是最常見也是最容易解決的）。

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

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

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

問題狀況：后面的塊屬性標簽被頂到下一行。

解決方法：在float的標簽樣式中加入:display:inline;將其轉化為行內屬性。

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

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

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

4.行內屬性標簽，設置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug。

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

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

5.圖片默認有間距。

問題狀況：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。

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

6.標簽最低高度設置min-height步兼容。

問題狀況：因為min-height本身就是一個不兼容的css屬性，所以設置min-height時不能很好的被給瀏覽器兼容。

解決方法：如果我們要設置一個標簽的最小高度為200px，需要進行的設置為：{min-height:200px; height:auto; !important; height:200px; overflow:visible;}。

7.透明度的兼容css設置。

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

1. /* CSS hack*/

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

◆IE6認識的hacker 是下劃線_ 和星號 *

◆IE7 遨游認識的hacker是星號 *

比如這樣一個CSS設置：

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

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

IE7和遨游也是一樣的從高度300px的設置往下讀。當它們讀到*height200px的時候就停下了，因為它們不認識_height。所以它們會把高度解析為200px，剩下的瀏覽器只認識第一個height:300px;所以他們會把高度解析為300px。因為優先級相同且想沖突的屬性設置后一個會覆蓋掉前一個，所以書寫的次序是很重要的。

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