浏览器兼容问题
2017-11-04 本文已影响0人
IsGirl
1 什么是 CSS hack
由于各浏览器的内核不同，各版本浏览器之间对CSS解析后的网页存在一些差异。导致和预期的效果不同。CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
2 浏览器兼容的思路
1 产品角度
根据你的产品的用户，用户使用的浏览器版本。
2 成本角度
有没有做的必要性
3 如何做
根据兼容需求选择技术库和框架比如
bootstrap（>=ie8）
jquery 1.~(>=ie6),jquery 2.~(>=ie9)
vue(>=ie9)
根据兼容需求选择兼容工具包括：比如html5shiv.js、respond.js、等
4 方式思路
渐进增强：针对低版本浏览器构建最基本功能页面，然后针对别的版本浏览器进行改动。
优雅降级：先构建完整功能页面，然后根据不同版本进行兼容。
3 列举5种以上浏览器兼容的写法
1.条件注释
<!--[if IE 6]
<p>You are using Internet Explorer 6.</p
<![endif]--
<!--[if !IE]><!--
<script>alert(1);</script
<!--<![endif]--
<!--[if IE 8]
<link href="ie8only.css" rel="stylesheet"
<![endif]-->
2.属性选择器
例如: IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
3.选择器前缀法(即hack)
.css-hack {
background-color: red; /* 其他浏览器上显示为红色 */
_background-color: blue; /* 只有IE 6浏览器上显示为蓝色 */
}
.css-hack {
background-color: red; /* 其他浏览器上显示为红色 */
background-color: blue \9; /* 所有IE浏览器上显示为蓝色 */
}
.clearfix{
zoom: 1; / 仅对ie67有效 */
}
4.条件注释结合类选择器整体优化.
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
.box{
color: green;
}
_.box{ /* IE6生效 */
color: red;
}
*.box{ /* IE67生效 */
color: pink;
}
.box\9{ /* IE/edge 6-8 */
color: yellow;
}
5.利用兼容工具 + 条件注释
- html5shiv.js： 用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题
- modernizr.js： 特性检测器，有就使用原生，没有就加载polyfill
<!--[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]-->
4 以下工具/名词是做什么的
- 条件注释：通过判断当前浏览器来实现特定功能，不是该浏览器会将代码识别为注释
- IE Hack：利用 IE 浏览器版本上的 BUG 来进行属性上的兼容
- js 能力检测：检测当前浏览器是否可以实现 JS 的某些方法
- html5shiv.js：使用Javascript来使不支持HTML5的浏览器支持HTML标签。
- respond.js：为某些不兼容媒体查询的浏览器实现 min/max--width，来达到响应式页面
- css reset：暴力清除所有浏览器默认样式
- normalize.css：在默认的HTML元素样式上提供了跨浏览器的高度一致性
- Modernizr：检测浏览器对 CSS3 或 HTML5 功能支持情况
- postCSS：它能够为 CSS 提供额外的功能；通过在 PostCSS 这个平台上，我们能够开发一些插件，来处理我们的CSS，比如热门的：autoprefixer；我们能够使用JavaScript来开发插件（这点对前端来说很重要）
