你遇到过的兼容性问题以及解决办法

• 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 渐变
  • ... 等等