一.什么是 CSS hack
- 由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
二.谈一谈浏览器兼容的思路
- 当我们遇到浏览器兼容问题时,首先想的是该兼容是否需要做,如果在产品和成本的角度来考虑比较合适就需要做,否则就不必了(当然做不做主要是还是看老板);当我们认为有必要做(或者老板要做)时,我们要考虑需要做到什么程度,也就是让哪些浏览器支持哪些效果;最后我们要考虑如何做,我们可以可以将兼容需求选择基础框/库(jquery),根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)postCSS
,另外我们可以使用条件注释、CSS Hack、js 能力检测做一些修补。
三.列举5种以上浏览器兼容的写法
- 选择合适的框架
Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9) - 属性前缀法
- IE条件注释法:
- 选择器前缀法
- 使用一些工具兼容
html5shiv.js: 用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题
modernizr.js: 特性检测器,有就使用原生,没有就加载polyfill
respond.js: 用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计
css reset直接重置浏览器的默认样式
normalize.css保留浏览器的原来样式并且做到每个浏览显示一致)
四.以下工具/名词是做什么的
- 条件注释:是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
- IE Hack:是针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程
- js 能力检测:最常用的也是最广泛使用的客户端检测技术是能力检测(特性检测)。能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何,只需确定浏览器是否支持特定的能力,就可以给出相关的方案。
- html5shiv.js:主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。
- respond.js:是在做响应式网页的时候一些浏览器器不支持媒体查询等css3新特性,使用respond.js来兼容。
- css reset:是样式重置,将浏览器的默认样式根据开发者的选择进行覆盖掉。
- normalize.css是一个可以定制的CSS文件,实现样式重置的一种方式,相对于其他的方式更有优势,标准化的样式,适用范围广的元素。纠正错误和常见的浏览器的不一致性。一些细微的改进,提高了易用性。使用详细的注释来解释代码。
- Modernizr:保护有用的浏览器默认样式而不是完全去掉它们,修复浏览器自身的bug并保证各浏览器的一致性,用一些小技巧优化CSS可用性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。
- postCSS:是一款通过JS插件来转换CSS的工具。这些插件能帮你校验你的CSS代码、转换未来的CSS语法、支持变量和混写、以及内联图片等等。