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

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