浏览器兼容

什么是 CSS hack

CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果
CSS Hack大致有3种表现形式:

  • CSS属性前缀法
  • 选择器前缀法
  • IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
谈一谈浏览器兼容的思路
  • 要不要做

    • 产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先)
    • 成本的角度 (有无必要做某件事)
  • 做到什么程度

    • 让哪些浏览器支持哪些效果
  • 如何做

列举5种以上浏览器兼容的写法

属性前缀法举例

.box {
    color:red;    ⁄* 所有浏览器都支持 *⁄ 
    color:red !important;   ⁄* Firefox、IE7支持 *⁄
    _color:red;   ⁄* IE6支持 *⁄
    *color:red;   ⁄* IE6、IE7支持 *⁄
    *+color:red;   ⁄* IE7支持 *⁄
    color:red \9;   ⁄* IE6、IE7、IE8支持 *⁄
    color:red \0;   ⁄* IE8支持 *⁄  
}```
**条件注释**:










用于非 IE

#####以下工具/名词是做什么的
- **条件注释**:条件注释 (conditional comment) 是于HTML源码中被 Microsoft Internet Explorer 有条件解释的语句。条件注释可被用来向 Internet Explorer 提供及隐藏代码
- **IE Hack**:使用特殊的符号或者方式写出只有IE浏览器可以解析的代码,有CSS属性前缀法、选择器前缀法以及IE条件注释法
- **js 能力检测**:使用JS的语法检测浏览器支持的属性,以便展示效果
- **html5shiv.js**:用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。
- **respond.js**:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
- **css reset**:通过重新定义标签样式,“覆盖”浏览器的CSS默认属性
- **normalize.css**:Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。
- **Modernizr**:Modernizr是一个 JavaScript 库,用于检测用户浏览器的 HTML5 与 CSS3 特性。
- **postCSS**:它可以被理解为一个平台,可以让一些插件在上面跑,它提供了一个解析器,可以将CSS解析成抽象语法树,通过PostCSS这个平台,我们能够开发一些插件,来处理CSS。热门插件如autoprefixer,它可以帮我们处理兼容问题,只需正常写CSS,autoprefixer可以帮我的自动生成兼容性代码

#####一般在哪个网站查询属性兼容性?
[**caniuse**](http://caniuse.com/) :查css属性 选择器在各浏览器的兼容。
[**browserhacks**](http://browserhacks.com/):查css属性 选择器在各浏览器Hack的写法
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 什么是 CSS hack CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什...
    怎么昵称阅读 3,276评论 0 1
  • 什么是 CSS hack? 基础概念 由于不同厂商的浏览器,比如Internet Explorer,Safari,...
    Sketch阅读 2,299评论 0 0
  • 一、如何调试 IE 浏览器? IE调试的一般方法(css): 使用高版本IE控制台(对于IE7以上)IE11的开发...
    婷楼沐熙阅读 3,599评论 0 6
  • 一、如何调试 IE 浏览器 IE7以上版本自带的开发者工具,IE6可以用border的方法;例:IE11的开发者工...
    __Qiao阅读 4,799评论 2 17
  • [摘要]YouTube表示,对于上传视频的用户而言,购物广告服务有望成为新的营收来源。 9月30日,《纽约时报》报...
    f11015f29d83阅读 2,662评论 0 1

友情链接更多精彩内容