常見的瀏覽器的相容問題以及解決辦法

相容問題是所有程式設計師都避免不了的問題，而瀏覽器的相容更是讓前端開發人員頭疼和問題。由於現在市場上的瀏覽器眾多，所有這裡就介紹谷歌和ie7到ie11之間的相容問題。

img

二、表單元素距離頂部間距不一致

解決辦法：給表單元素新增宣告：float:left;

.heacd form input

三、字型不一致(谷歌上顯示微軟雅黑 ie上顯示別的字型)

解決辦法：給body加上font-family屬性。

body

ps:想設定字型都可以主要看你的需要來

四、谷歌瀏覽器最小字型大小支援到12px，12px以下的字型大小不支援

解決辦法：第一種：直接切圖用背景圖嵌進去。（如果字比較少推薦這種方式）第二種：在html或者body裡新增一句谷歌瀏覽器專有的屬性 html,body 注意點：在新版本的谷歌瀏覽器裡已經無效。第三種：css3的乙個縮放屬性（因為是css三的屬性可能相容性不太好）

/*第二種方法*/
html,body
/*第三種方式*/
transfrom
:scale()
;

谷歌的透明度寫法：opacity:value;(value的取值範圍0-1;。ie的透明度寫法：filter:alpha(opacity=value);取值範圍 0-100(整數) 想要頁面在ie和谷歌上都沒問題就必須新增過濾器。

解決辦法：新增過濾器。

/*給banner下的新增透明屬性*/ 。banner img

注意：想要ie和谷歌都一樣就需要在ie的寫法上新增過濾器就好

子元素沒設定任何浮動，設定了margin-top屬性後，會錯誤的把margin-top的屬性值新增給父元素

"box">
"box2">

ps:其餘二種可以自行嘗試。

解決辦法：第一種：:給元素新增宣告：font-size:0; （這裡不太推薦大家使用元原因是這個設定也會讓元素裡面的字型的大小給改變了）。第二種：給元素新增宣告：overflow:hidden;（推薦）

這裡我用的塊元素是li標籤作為演示

"box">

下面是我在ie7上執行的介面可以看到 li標籤的顏色就顯現出來了

當ie6版本瀏覽器在解析浮動元素時，會錯誤地把浮向邊邊界（margin）加倍顯示。

解決辦法：給浮動元素新增宣告：display:inline;

這是在ie6上測試的可以看到第乙個盒子的左邊距很大這是因為瀏覽器將margin的值雙倍的顯示出來所以我們成這個現象為雙倍浮向。

**如下

"box">
"le">
"rl">