瀏覽器兼容性問題，是因為不同瀏覽器的內(nèi)核不同棺耍，導(dǎo)致各個瀏覽器對網(wǎng)頁的解析存在一定的差異贡未，對同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況蒙袍。在大多數(shù)情況下俊卤，我們的需求是，無論用戶用什么瀏覽器來查看我們的網(wǎng)站或者登陸我們的系統(tǒng)害幅，都應(yīng)該是統(tǒng)一的顯示效果消恍。所以瀏覽器的兼容性問題是前端開發(fā)人員經(jīng)常會碰到和必須要解決的問題。做前端最怕什么以现？就是IE6狠怨！調(diào)個兼容能被搞得心力憔悴。前端最喜歡看到的就是各家瀏覽器大統(tǒng)一邑遏，告別瀏覽器兼容調(diào)試佣赖。

常見的瀏覽器內(nèi)核可以分四種：Trident、Gecko记盒、Blink憎蛤、Webkit

以下列出一些常見的瀏覽器兼容問題：

1.不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不同

不同的標(biāo)簽彬碱，不加樣式控制的情況下，各自的margin 和padding差異較大奥洼。

• 解決方案：
  可以使用Normalize.css來清除默認(rèn)樣式巷疼，也可以使用如下代碼：

body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }

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

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

3.IE6雙邊距問題，在IE6中設(shè)置了float , 同時又設(shè)置margin , 就會出現(xiàn)邊距問題

• 解決方案：
  設(shè)置display:inline;

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

• 解決方案：
  使用float 為img 布局

5.IE9一下瀏覽器不能使用opacity

• 解決方案：
  opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

6.cursor:hand 顯示手型在safari 上不支持

• 解決方案：
  統(tǒng)一使用 cursor:pointer

7.邊距重疊問題

當(dāng)相鄰兩個元素都設(shè)置了margin 邊距時骡尽，margin 將取最大值遣妥，舍棄最小值；

• 解決方案：
  為了不讓邊重疊攀细，可以給子元素增加一個父級元素箫踩，并設(shè)置父級元素為overflow:hidden；

8.兩個塊級元素谭贪，父元素設(shè)置了overflow:auto境钟；子元素設(shè)置了position:relative ;且高度大于父元素，在IE6俭识、IE7會被隱藏而不是溢出慨削；

• 解決方案：
  父級元素設(shè)置position:relative

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

min-height本身就是一個不兼容的CSS屬性，所以設(shè)置min-height時不能很好的被各個瀏覽器兼容

• 解決方案：
  如果我們要設(shè)置一個標(biāo)簽的最小高度200px套媚，需要進(jìn)行的設(shè)置為：

{min-height:200px; height:auto ![ImportAnt]; height:200px; overflow:visible;}

在網(wǎng)站設(shè)計的時候缚态，應(yīng)該注意css樣式兼容不同瀏覽器問題，特別是對完全使用DIV CSS設(shè)計的網(wǎng)堤瘤，就應(yīng)該更注意IE6 IE7 FF對CSS樣式的兼玫芦。下面針對不同瀏覽器列出其專用寫法：

————愿你在迷茫時宙橱，堅信你的珍貴姨俩，愛你所愛，行你所行师郑，聽從你心环葵，無問西東。