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

一.什麼是瀏覽器兼容性問題

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

二.瀏覽器兼容性問題產生緣由

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

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

1.不一樣瀏覽器標籤默認的外邊距和內邊距不一樣（這是最多見也是最容易解決的）。

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

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

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

問題情況：後面的塊屬性標籤被頂到下一行。

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

3.設置較小高度標籤（通常小於10px），在IE六、IE7，遨遊中高度超出本身設置的高度。

問題情況：IE六、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設置。

作兼容頁面的方法是：每寫一小段代碼（佈局中的一行或者一塊）咱們都要在不一樣的瀏覽器中看是否兼容，固然熟練到必定的程度就沒這麼麻煩了。建議常常會碰到兼容性問題的新手使用。不少兼容性問題都是由於瀏覽器對標籤的默認屬性解析不一樣形成的，只要咱們稍加設置都能輕鬆地解決這些兼容問題。若是咱們熟悉標籤的默認屬性的話，就能很好的理解爲何會出現兼容問題以及怎麼去解決這些兼容問題。

/* CSS hack*/

我不多使用hacker的，多是我的習慣吧，我不喜歡寫的代碼IE不兼容，而後用hack來解決。不過hacker仍是很是好用的。使用hacker我能夠把瀏覽器分爲3類：IE6 ；IE7和遨遊；其餘（IE8 chrome ff safari opera等）

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

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

好比這樣一個CSS設置：

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。由於優先級相同且想衝突的屬性設置後一個會覆蓋掉前一個，因此書寫的次序是很重要的。