一、 png24位的圖片在IE6瀏覽器上出現背景，解決方案是做成PNG8.也可以引用一段腳本處理.

二、瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

三、IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大。

四、浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。）

　　　　#box{ float:left; width:10px; margin:0 0 0 100px;}

　　這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)

五、漸進識別的方式，從總體中逐漸排除局部。

　　首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。
　　接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

　　CSS:
　　　　.bb{
　　　　　　background-color:#f1ee18;/*所有識別*/
　　　　　　.background-color:#00deff\9; /*IE6、7、8識別*/
　　　　　　+background-color:#a200ff;/*IE6、7識別*/
　　　　　　_background-color:#1e0bd1;/*IE6識別*/
　　　　　}

六、IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性.
　　解決方法:統一通過getAttribute()獲取自定義屬性.

七、IE下,event對象有x,y屬性,但是沒有pageX,pageY屬性;?Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.

　　解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

八、Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,

　　可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

九、超鏈接訪問過后hover樣式就不出現了，被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
　　L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

十、怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD聲明的好習慣。現在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`

十一、上下margin重合問題
　　IE和Firefox都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。
　　解決方法，養成良好的代碼編寫習慣，同時采用margin-top或者同時采用margin-bottom。
十二、IE6對png圖片格式支持不好(引用一段腳本處理)
十三、解釋下浮動和它的工作原理？清除浮動的技巧

　　浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

　　1.使用空標簽清除浮動。
　　　這種方法是在所有浮動標簽后面添加一個空標簽 定義css clear:both. 弊端就是增加了無意義標簽。
　　2.使用overflow。
　　 ?給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
　　3.使用after偽對象清除浮動。
　　　　該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設置 height:0，否則該元素會比實際高出若干像素；

轉載于:https://www.cnblogs.com/wendy-home-5678/p/6436091.html

總結

以上是生活随笔為你收集整理的一些常见的兼容性问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。