浏览器兼容
2017-10-07 本文已影响0人
曾祥辉
1.什么是 CSS hack
由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
2.谈一谈浏览器兼容的思路
- 要不要做
- 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
- 成本的角度 (有无必要做某件事)
- 做到什么程度
- 让哪些浏览器支持哪些效果
- 如何做
- 根据兼容需求选择技术框架/库(jquery)
- 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)、postCSS
条件注释、CSS Hack、js 能力检测做一些修补
3.列举5种以上浏览器兼容的写法
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
css:after{
content: " ";
display: block;
clear: both;
}
css{
*zoom: 1;
}
.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/
.element{
display: inline-block;
*display: inline;
*zoom: 1;
}
.all IE{property:value\9;}
.gte IE 8{property:value\0;}
.lte IE 7{*property:value;}
.IE 8/9{property:value\0;}
.IE 9{property:value\9\0;}
.IE 7{+property:value;}
.IE 6{_property:value;}
.not IE{property//:value;}
4.以下工具/名词是做什么的
- 条件注释：HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。IE10不再支持条件注释。语法：
<!--[if * IE N]--><条件语句><![endif]-->（其中“*”为下列值或为空，N为IE版本号）
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同。
- IE Hack：利用IE各版本的特性与bug进行CSS Hask。如ie10以下可以使用条件注释，ie6可识别“*”等。
- js 能力检测：就是看浏览器是否支持当前对象的属性或是方法，先通过获得页面文本内容的方式来了解兼容性，并封装函数或对象以解决此类问题。
- html5shiv.js：是一套实现让ie低版本等浏览器支持HTML5标签的解决方案。
- respond.js：让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
- css reset：将浏览器的默认样式全部去掉，就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。
- normalize.css：根据实际需求合理地修改Html元素的默认样式，修复浏览器自身的Bug。
- Modernizr：是一个用来检测浏览器功能支持情况的 JavaScript 库。
- postCSS：是一个通过自定义插件和工具来改造CSS的平台。
