浏览器兼容

什么是 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浏览器不同版本之间的表现差异而引入的。注:IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本: 。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

谈一谈浏览器兼容的思路

  • 要不要做

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

  • 做到什么程度

  • 让哪些浏览器支持哪些效果

  • 如何做

  • 根据兼容需求选择技术框架/库(jquery)

  • 根据兼容需求选择兼容工具(html5shiv.js、[respond.js]- (https://github.com/scottjehl/Respond)、css resetnormalize.cssModernizr)postCSS

  • 条件注释、CSS Hack、js 能力检测做一些修补

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

条件注释
<script>alert(1);</script>

CSS hack
.box{ color: red; _color: blue; /*ie6*/ *color: pink; /*ie67*/ color: yellow\9; /*ie/edge 6-8*/}

以下工具/名词是做什么的
条件注释
条件注释 (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
PostCSS是一个JS插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合,转化css3的新特性语法、行内图片等。

一般在哪个网站查询属性兼容性?

caniuse :查css属性 选择器在各浏览器的兼容。browserhacks:查css属性 选择器在各浏览器Hack的写法

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 什么是 CSS hack CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什...
    怎么昵称阅读 3,276评论 0 1
  • 一、如何调试 IE 浏览器 IE7以上版本自带的开发者工具,IE6可以用border的方法;例:IE11的开发者工...
    __Qiao阅读 4,799评论 2 17
  • 一、如何调试 IE 浏览器? IE调试的一般方法(css): 使用高版本IE控制台(对于IE7以上)IE11的开发...
    婷楼沐熙阅读 3,599评论 0 6
  • 一、问答部分 1. 如何调试 IE 浏览器 IE7及以上版本有调试台,可以按F12启动。Paste_Image.p...
    _hello__world_阅读 3,465评论 0 1
  • 在开始之前,我们很感激你对Caffe2感兴趣,希望Caffe2在你的机器学习作品中是一个高性能的框架。Caffe2...
    少侠阿朱阅读 10,214评论 0 1

友情链接更多精彩内容