你遇到過的兼容性問題以及解決辦法

• 1.png24位的圖片在ie6瀏覽器上出現背景

  • 解決方案： 作成png8
    

• 2.瀏覽器默認的margin和padding不一樣

  • 解決方案：添加一個全局的{margin：0;padding: 0;}來統一
    

• 3.ie6雙邊距bug：塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。浮動ie產生的雙倍邊距 float: left; width: 10px; margin: 0 0 0 100px;這種狀況之下ie會產生20px的距離

  • 解決方案： 在float的標籤樣式控制中加入_display: inline;將其轉化爲行內屬性。

• 4.ie下能夠使用獲取常規屬性的方法來獲取自定義屬性，也能夠使用getAttribute()獲取自定義屬性；火狐下只能使用getAttribute()獲取自定義屬性

  • 解決辦法： 贊成經過getAttribute()獲取自定義屬性

• 5.ie下，even對象有x，y屬性，可是沒有pageX，pageY屬性。火狐下，event對象有pageX，pageY屬性，可是沒有x，y屬性。

  • 解決辦法：（條件註釋）肯定是在ie瀏覽器下可能會增長額外的http請求

• 6.chrome中文界面下默認會將小於12px的文本強制按照12px顯示 — 解決辦法：添加css屬性-webkit-text-size-adjust：none; 解決

• 7.超級連接訪問事後，hover樣式就不出現了，被點擊訪問過的超連接樣式不在具備hover和active了。

  • 解決辦法：改變css屬性的排列順序： L-V-H-A' -->link,visited,hover,active

• 8.高清屏 1px border 像素問題(window.devicePixelRatio = 1 | 2 |3 -> 若是是 2 ->css 的 1px 運行-> 2px),需求: 但願在 2|3 時->1px 的 border 仍然是 1px?

  • 1. if->devicePixelRatio | @media 判斷 -> 若是是 2-> border:.5px .333333px (iOS8+)
  • 2. border-image | background-image -> 其中 1px 是透明
  • 3. C3 屬性 transform:scale(.5)
  • 4. C3 屬性 box-shadow 漸變
  • ... 等等