1.什么是CSS hack
由于不同厂商的浏览器，比如IE、Safari、Firefox、Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到想要的页面效果。所以需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到想要的页面效果。
2.谈谈浏览器兼容的思路
(1)要不要做
产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先)
成本的角度(有无必要做某件事)
(2)做到什么程度
让哪些浏览器支持哪些效果
(3)如何做
根据兼容需求选择技术框架/库(jquery)
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS
条件注释、CSS Hack、js能力检测做一些修补
3.列举五种以上浏览器兼容的写法
(1)合适的框架
| 框架 | 兼容性 |
|---|---|
| Bootstrap | (>=IE8) |
| jQuery 1.~ | (>=IE6) |
| jQuery 2.~ | (>=IE9) |
| Vue | (>=IE9) |
(2)条件注释
<!--[if IE 6]-->
<p>You are use Internet Explorer 6</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
| 项目 | 范例 | 说明 |
|---|---|---|
| ！ | [if !IE] | 非IE |
| it | [if it IE 5.5] | 小于IE5.5 |
| ite | [if ite IE 6] | 小于等于IE6 |
| gt | [if gt IE 5] | 大于IE5 |
| gte | [if gte IE 7] | 大于等于IE7 |
| | | if(IE6)|(IE7) | IE6或者IE7 |
CSS hack
常见属性的兼容情况
| 属性 | 兼容情况 |
|---|---|
| inline-block | >=ie8 |
| min-width/min-height | >=ie8 |
| :before,:after | >=ie8 |
| div:hover | >=ie7 |
| background-size | >=ie9 |
| 圆角/阴影 | >=ie9 |
| 动画/渐变 | >=ie10 |
(3)属性前缀法
.box{
color: red;
_color: yellow; /*ie6*/
*color: blue; /*ie6 7*/
color: yellow\9; /* ie/edge 6-8*/
}
(4)选择器前缀法
.clearfix::after{
cotent: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /*仅对ie6 7有效*/
}
.target{
display: inlie-block;
*display: block;
*zoom: 1;
}
(5)IE条件注释法（HTML头部引用if IE）
<!--[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.以下工具/名词是做什么的
条件注释
HTML源码中被IE有条件解释的语句，可被用来向IE提供及隐藏代码。（条件注释页面在IE9可正常使用，IE10不可正常使用）
IE Hack
针对IE浏览器编写不同的CSS（属性前缀法、选择器前缀法、IE条件前缀法），使得在不同浏览器中可以达到想要的效果。
js能力检测
使用js来检测浏览器的能力，不是区分浏览器，这样如果浏览器拥有某种能力则提供一种方案，没有某种能力则提供另一种方案。
html5shiv.js
针对不支持HTML5标签的浏览器，创建并模拟HTML5标签的效果并使相应的CSS生效。
respond.js
为不支持CSS3的媒体查询的浏览器（IE6-8）模拟CSS3的媒体查询。
css reset
清除浏览器默认样式*{margin: 0; padding: 0;}
normalize.css
保留有用的默认样式，修复浏览器自身的bug和常见浏览器的不一致性，使用详细的注释来解释代码。
Modernizr
是一个js类库，用来检测html5和CSS3能力，从而解决浏览器的兼容问题。
postCSS
利用JS插件转换CSS的工具，这些插件能够检验CSS、支持变量和混合，转化css3的新特性语法、行内图片等。
网友评论