浏览器兼容
2017-03-07 本文已影响0人
yytyff
什么是浏览器兼容问题
同一份代码，有的浏览器效果正常，有的不正常
不正常的原因是什么？(不支持? bug？)
1，浏览器不支持这个，比如用了一个浏览器不支持的框架
2，比如新的属性，IE7不支持
3，比如有一个展示不正常，有bug
如何让它展示正常?(条件注释？ 单独Hack？)
为什么会有浏览器兼容问题
同一产品，版本越老 bug 越多:最典型的就是IE6，现在一般是IE11了，很多属性，低版本的浏览器不兼容
同一产品，版本越新，功能越多：对于新的特性，老的浏览器不支持
不同产品，不同标准，不同实现方式：IE，chrome，Firefox等等，后老出现了W3C标准
用到的网站
浏览器市场份额：http://tongji.baidu.com/data/browser
caniuse.com 查CSS属性兼容：http://caniuse.com
browserhacks 查 Hack 的写法：http://browserhacks.com/
处理兼容问题的思路
说白了就是要兼容到几，兼容到，IE8，IE7，IE6？
要不要做
产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
成本的角度 (有无必要做某件事)
做到什么程度
让哪些浏览器支持哪些效果。比如IE6,7jquery就好些
如何做
根据兼容需求选择技术框架/库(jquery)
根据兼容需求选择兼容工具(html5shiv.js（用HTML5的标签写的，模拟低浏览器版本的标签）、
respond.js（响应式，媒体查询，可以模拟出来）、css reset（去除浏览器默认样式）、
normalize.css、Modernizr)
postCSS：写属性的时候不要考虑版本和写前缀，写好后，自动加前缀。
条件注释、CSS Hack、js 能力检测做一些修补
渐进增强和优雅降级
渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，
然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
stackoverflow-渐进增强和优雅降级的区别
http://stackoverflow.com
合适的框架
Bootstrap (>=ie8) http://www.bootcss.com/
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9)
...
条件注释
条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。
条件注释可被用来向IE提供及隐藏代码。只有IE6,7,8,9才能识别这种规范，对于其他浏览器就是个注释
<!--[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]-->
使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作，
但在 Internet Explorer 10 中无法正常工作。 IE10不再支持条件注释
条件注释
项目 范例 说明
！ [if !IE] 非IE
lt [if lt IE 5.5] 小于IE 5.5
lte [if lte IE 6] 小于等于IE6
gt [if gt IE 5] 大于 IE5
gte [if gte IE 7] 大于等于IE7
| [if (IE 6)|(IE 7)] IE6或者IE7
CSS hack
由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，
或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，
因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。
CSS hack
CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，
实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，
但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
选择器前缀法(即选择器Hack)
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：
<!--[if IE]>IE浏览器显示的内容 <![endif]-->，针对IE6及以下版本：<!--[if lt IE 6]>
只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效
IE Hack：针对IE浏览器编写不同的CSS，使得在IE浏览器中也能得到我们想要的页面效果
- js 能力检测：使用JS检测浏览器是否支持特定的功能来确定解决方案
常见hack写法
.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
inline-block: >=ie8
background-size: >=ie9
圆角: >= ie9
阴影: >= ie9
动画/渐变: >= ie10
常见兼容处理范例
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对ie67有效 */
}
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
<!--[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]-->
一些和兼容相关的开发利器
html5shiv.js
https://github.com/aFarkas/html5shiv
respond.js（CSS3响应式，媒体查询）
https://github.com/scottjehl/Respond
CSS Reset
https://segmentfault.com/a/1190000003021766
normalize.css:保护默认价值，修复 bug,
https://github.com/necolas/normalize.css
Modernizr
https://github.com/Modernizr/Modernizr
https://segmentfault.com/a/1190000003820989
如何调试老掉牙的 IE
安装虚拟机
给元素添加border
