阅读 61

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

  • 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+)
      1. border-image | background-image -> 其中 1px 是透明
      1. C3 属性 transform:scale(.5)
      1. C3 属性 box-shadow 渐变
    • ... 等等
关注下面的标签,发现更多相似文章
评论