乐趣区

关于前端学习:CSS样式样式兼容处理

jiezi

  • 理解什么是款式兼容

    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

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

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