常見的瀏覽器兼容性問題

  • 設置透明度問題, 解決方案
.transparent_class {  
      filter:alpha(opacity=50); //IE 10以下
      opacity: 0.5;  
 }
  • png24位的圖片在iE6瀏覽器上出現背景,解決方案是做成PNG8.
  • 瀏覽器默認的marginpadding不同。
    解決方案:加一個全局的*{margin:0;padding:0;}來統一。
  • 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識別*/
  }
  • IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
    也可以使用getAttribute()獲取自定義屬性;
    Firefox下,只能使用getAttribute()獲取自定義屬性.
    解決方案:統一通過getAttribute()獲取自定義屬性.
  • IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.
    解決方案:(條件注釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
  • Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示
    解決方案:可通過加入 CSS 屬性-webkit-text-size-adjust: none;解決.
  • 超鏈接訪問過后hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hoveractive了。
    解決方案:改變CSS屬性的排列順序:L-V-H-A :a:link {} a:visited {} a:hover {} a:active {}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容