• 理解什么是款式兼容

    CSS3未公布正式规范版本，对于一些款式浏览器厂商有本人的渲染规定，所以须要进行兼容解决

  • 浏览器前缀兼容形式

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

    浏览器内核前缀
    IETrident-ms-
    FirefoxGecko-moz-
    OperaPresto / Blink-o-
    ChromeWebkit / Blink-Webkit-
    SafariWebkit-Webkit-

  • CSS Hack

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

    • 款式增加前缀标识符办法
    前缀标识兼容浏览器
    _IE6
    + 、 *IE6、IE7
    \9IE6、IE7、IE8、IE9
    \0IE8、IE9、IE10、IE11
    • 选择器增加前缀计划
    前缀标识兼容浏览器
    *htmlIE6
    *+htmlIE7
    :rootIE9以上及规范浏览器
    • 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

  • 开发中罕用兼容适配办法

    • 渐进加强
      先对低版本浏览器进行页面的构建，保障最根本的性能，而后针对高级版本浏览器进行成果、交互进行改良，追加更多功能来晋升用户体验
    • 优雅降级：
      先进行残缺性能的构建，在针对低版本浏览器做兼容解决