1、什么是 CSS hack
由于不同厂商的浏览器,比如IE, Safari, Mozilla Firefox, Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。此时,针对不同的浏览器去写不同的CSS,使之能在不同的浏览器中也能得到想要的页面效果,这一过程为CSS hack。
2、谈一谈浏览器兼容的思路
(1)考虑需求(要不要做)
- 从产品角度,产品的受众、受众浏览器比例、效果优先还是基本功能优先。一般是兼容到IE6、IE8等。
- 从成本角度,有无必要做。
(2)考虑范围(做到什么程度)
让哪些浏览器支持哪些效果。
(3)具体方法- 根据兼容需求选择技术框架/库(jquery);
- 根据兼容需求选择兼容工具;html5shiv.js、respond.js、css reset、normalize.css、Modernizr、 postCSS;
- 条件注释、CSS Hack、js 能力检测做一些修补 。
(4)渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
3、列举5种以上浏览器兼容的写法
(1)选择合适的框架,Bootstrap (>=ie8)、jQuery 1.~ (>=ie6)、jQuery
(2)条件注释,用来向IE提供及隐藏代码。
CSS hack
(3)属性前缀法,IE6能识别下划线_和星号,IE7能识别星号,但不能识别下划线;IE6~IE10都认识\9,但firefox前述三个都不能认识。
!important,表示高优先级,ie7及以上,firefox都支持,ie6认识带!important的样式属性,但不认识!important的优先级;
-webkit- ,针对safari,chrome浏览器的内核CSS写法;
-moz-,针对firefox浏览器的内核CSS写法;
-ms-,针对ie内核的CSS写法;
-o-,针对Opera内核的CSS写法。
(4)选择器前缀法
(5)一些和兼容相关的开发工具
- Html5shiv.js 让IE9以下的IE浏览器支持html5的一些标签,可以用html5shiv.js来模拟标签。
- Respond 媒体查询(css3新特性),有些浏览器不支持媒体查询,可以用respond.js来兼容。
- CSS reset 清除、覆盖浏览器的CSS默认属性。
- Normalize.css 是CSS reset的改良版,让不同的浏览器在渲染网页元素的时候形式更统一。
- Modernizr 可以检测html5和css3的特性。
4、以下工具/名词是做什么的。
条件注释
,是html源码中被IE有条件解释的语句,用来向IE提供及隐藏代码。IE9以下支持条件注释,IE10不再支持条件注释。
IE Hack
,针对IE浏览器编写不同的CSS让IE能够正常渲染的过程。包括属性前缀法、选择器前缀法以及IE条件注释法。
js能力检测
,首先检测浏览器是否支持特定的能力,然后可以给出特定的解决方案。
html5shiv.js
,让IE9以下的IE浏览器支持html5的一些标签,可以用html5shiv.js来模拟标签。
respond.js
,对于媒体查询(css3新特性),有些浏览器不支持,可以用respond.js来兼容。
CSS reset
,清除、覆盖浏览器的CSS默认属性。
normalize.CSS
,是CSS reset的改良版,让不同的浏览器在渲染网页元素的时候形式更统一。
modernizr
,是一个JavaScript库,可以检测html5和css3的特性。
postCSS
,是一个使用JS插件来转换CSS的工具。
5、查询兼容性网站
http://caniuse.com/ 查CSS属性兼容
http://browserhacks.com/ 查Hack的写法