1. 什么是 CSS hack
由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能在不同的浏览器中也能得到我们想要的页面效果。
2. 谈一谈浏览器兼容的思路
- 首先考虑要不要做兼容。从产品的角度考虑产品的受众,及受众使用的各浏览器的比例,效果优先还是基本功能优先。
- 兼容哪些浏览器,兼容到什么版本,让哪些浏览器支持哪些效果。
- 渐进增强和优雅降级的选择
- 如何做兼容,根据兼容需求选择技术框架,比如:
- Bootstrap (>=ie8)
- jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
- Vue (>= ie9)
- 根据兼容需求选择兼容工具html5shiv.js、respond.js、css reset、Modernizr、postCSS
- 考虑使用条件注释、CSS Hack、js 能力检测等对兼容做一些修补。
3.列举5种以上浏览器兼容的写法
-
条件注释
条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
<script>alert(1);</script>
使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作,但在 Internet Explorer 10 中无法正常工作。 IE10不再支持条件注释 -
CSS hack
可以实现只有IE才能识别的样式或html代码
.box{
color: red;
_color: blue; /ie6/
color: pink; /ie67/
color: yellow\9; /ie/edge 6-8*/
}<!–-[if IE 7]> <link rel="stylesheet" href="ie7.css" type="text/css" /> <![endif]–->
-
根据浏览器选择相应的样式
- inline-block: >=ie8
- min-width/min-height: >=ie8
- :before,:after: >=ie8
- div:hover: >=ie7
- background-size: >=ie9
- 圆角: >= ie9
- 阴影: >= ie9
- 动画/渐变: >= ie10
-
使用html5shiv.js可以使IE6,7兼容html5标签
-
使用response.js十一使IE6,7支持媒体查询
4. 以下工具/名词是做什么的
- 条件注释
作用:在HTML源码中写出能被IE有条件解释的代码,可以向IE提供或隐藏代码
-
IE Hack
作用:使用特殊的语句写出只有IE能够解析的代码,常见的IE Hack有属性前置法、选择器前置法和IE条件注释 -
js 能力检测
作用:使用js语句检测浏览器是否支持某种特定的属性 -
html5shiv.js
作用:可以解决IE9以下版本浏览器对html5标签不识别的问题 -
respond.js
作用:可以使IE6~IE8支持媒体查询 -
css reset
作用:因为早期的浏览器支持和理解的CSS规范不同,导致渲染出来的效果不一样,会出现兼容性问题,css reset通过重新定义标签的样式,覆盖浏览器的默认样式 -
normalize.css
作用:是一个很小的css文件,但它在默认的html元素样式上提供了跨浏览器的高度一致性,相比于reset.css,它是一种现代的,为html5准备的优质替代方案 -
Modernizr
作用:用于检测出浏览器是否支持某种html5和css3的新特性,浏览器是否禁用js等 -
postCSS
是一套使用js插件实现的转换CSS的工具;这些插件支持变量、混合语法等等;参考:PostCSS快速入门使用
- 一般在哪个网站查询属性兼容性?
caniuse :查css属性 选择器在各浏览器的兼容。
browserhacks:查css属性 选择器在各浏览器Hack的写法
网友评论