1.什么是 CSS hack
不同的浏览器对css有不同的解释行为，这样就会出现不兼容的问题，简单的说，css hack指各版本及各品牌浏览器之间对css解释后，出现网页内容的误差的处理，即对于浏览器不兼容性的处理。
CSS Hack大致有三种表现形式，css内部hack，选择器hack以及以及HTML头部引用(if IE)Hack。实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
2. 谈一谈浏览器兼容的思路
关于浏览器兼容性，主要是讨论三个大问题
- 要不要做
- 每个开发的项目所针对的用户是不同的，是否要兼容ie6 7等浏览器版本的问题，首先得看所针对的用户群体，看是否用户群体中使用低版本的浏览器的人数有相当的比例
- 接着还要考虑成本的问题
- 如果确定做那要做到什么程度，让哪些浏览器支持哪些效果
- 如果做，那么根据需求要选择什么技术框架、兼容工具，后期修补等问题
3.列举5种以上浏览器兼容的写法
- inline-block: >=ie8
- min-width/min-height: >=ie8
- :before,:after: >=ie8
- div:hover: >=ie7
- background-size: >=ie9
- 圆角: >= ie9
- 阴影: >= ie9
- 动画/渐变: >= ie10
1.清除浮动
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对ie67有效 */
}
2.inline-block
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
3.html5shiv、respond
小于ie9这个脚本就生效
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
4.属性前缀
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
5.条件注释
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
4.以下工具/名词是做什么的
-
条件注释：是用于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码，使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中无法正常工作。 IE10不再支持条件注释
-
IE Hack
使用特殊的符号或方式写出只有IE浏览器可以解析的代码，有css属性前缀法、选择器前缀法以及IE条件注释法。
CSS属性前缀法： 比如IE6能识别下划线和星号，IE7能识别星号 ，但不能识别下划线，而firefox两个都不能认识。
选择器前缀法： 比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
HTML头部引用(if IE)Hack：
针对所有IE：，针对IE6及以下版本：，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
书写顺序： 一般是将识别能力强的浏览器的CSS写在前面。浏览器优先级别：FF < IE7 < IE6，CSS hack书写顺序一般为FF IE7 IE6。 -
js 能力检测：检测浏览器的能力(而不是检测浏览器的种类)，根据检测到的浏览是否具有特定的能力，来制定具体的解决方案。
-
html5shiv.js：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题
由于IE6/IE7/IE8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，解决方案就有下面两个：
(1) 为网站创建多套模板，通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面，这样的维护成本比较高，也失去响应式设计的意义。
(2) 使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式（Bootcss官方例子也是如此）。
原理：利用脚本document.createElement(“”)创建对应的脚本，CSS选择器便可正确应用到该标签。使用：考虑到IE9是支持html5的，所以直接在HTML页面的head标签中添加脚本引用即可 -
respond.js：让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
-
css reset:将浏览器的默认样式全部去掉，就是通过重新定义标签样式。“覆盖”浏览器CSS默认属性
-
normalize.css：Normalize.css 是一个可定制的CSS文件，使浏览器呈现的所有元素，更一致和符合现代标准。它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。这是一个现代的，HTML5-ready 的CSS重置样式集。
-
Modernizr：Modernizr 是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。
Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
工作原理
Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。 -
postCSS：PostCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。
PostCSS 包括 CSS 解析器，CSS 节点树 API，一个源映射生成器和一个节点树 stringifier。
PostCSS是CSS变成JavaScript的数据，使它变成可操作。PostCSS是基于JavaScript插件，然后执行代码操作。PostCSS自身并不会改变CSS，它只是一种插件，为执行任何的转变铺平道路。
网友评论