遇到的瀏覽器的兼容性問題(隨時增加)

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

2、png24爲的圖片在iE6瀏覽器上出現背景,解決方案是做成PNG8。

3、IE6雙邊距bug:塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設置的大。
浮動ie產生的雙倍距離 #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識別*/

          } 

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

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

6、(條件註釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

7、Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章