CSS样式——样式兼容处理

• 了解什么是样式兼容

  CSS3未发布正式标准版本，对于一些样式浏览器厂商有自己的渲染规则，所以需要进行兼容处理

• 浏览器前缀兼容方式

  通过对样式名或样式值添加浏览器前缀达到不同浏览器的兼容

  浏览器	内核	前缀
  IE	Trident	-ms-
  Firefox	Gecko	-moz-
  Opera	Presto / Blink	-o-
  Chrome	Webkit / Blink	-Webkit-
  Safari	Webkit	-Webkit-

• CSS Hack

  CSS Hack用于解决浏览器兼容问题，为不同的浏览器定制编写不同的样式，使所有浏览器的显示样式达到预期的效果

  • 样式添加前缀标识符方法

  前缀标识	兼容浏览器
  _	IE6
  + 、 *	IE6、IE7
  \9	IE6、IE7、IE8、IE9
  \0	IE8、IE9、IE10、IE11

  • 选择器添加前缀方案

  前缀标识	兼容浏览器
  *html	IE6
  *+html	IE7
  :root	IE9以上及标准浏览器

  • IE条件注释方案
    IE 10 以上浏览器不支持条件注释方案

  前缀标识	兼容浏览器
  <!--[if IE]> CSS代码 <![endif]--\>	IE
  <!--[if IE7]> CSS代码 <![endif]--\>	IE7
  <!--[if lte IE]> CSS代码 <![endif]--\>	IE7以下
  <!--[if !IE]> CSS代码 <![endif]--\>	非IE

• IE低版本常见BUG

  • 透明度问题：
    IE8以下版本出现
    解决：添加 filter:alpha(opacity=50);范围为0-100
  • 双边距问题：
    IE6版本（IE6 最小高度19px）
    解决：添加_overflow:hidden
  • 图片边框问题：
    IE 版本
    解决：添加：border:none

• 开发中常用兼容适配方法

  • 渐进增强
    先对低版本浏览器进行页面的构建，保证最基本的功能，然后针对高级版本浏览器进行效果、交互进行改进，追加更多功能来提升用户体验
  • 优雅降级：
    先进行完整功能的构建，在针对低版本浏览器做兼容处理