浏览器兼容处理

2017-08-11

Html页面

1.浏览器的渲染模式，建议引入：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

2.IE 缓存过大，比如一些请求，或者动态更换img地址等，可以地址参数加个时间戳或通过版本控制；

3.文本框的placeholder在ie8之下失效，可以通过引入placeholder.js来解决；

JS

低版本浏览器兼容ES5的一些属性、方法，引入：
<script src="//cdn.bootcss.com/es5-shim/4.5.9/es5-shim.min.js"></script> <script src="//cdn.bootcss.com/es5-shim/4.5.9/es5-sham.min.js"></script>

2.在低版本浏览器中，ajax get请求参数含有中文字符转码后字符太长，后端获取不到参数，可改用post；

3.图表插件echarts，在低版本浏览器中报js错误(fiflter未定义…)，可以通过引入 es5-array.js插件解决；

4.ajax在ie8，ie9下不能跨域，引入 jquery.xdomainrequest.min.js 解决；

5.ie8浏览器下不识别键盘事件中的event.which ，用event.which||event.keyCode；

CSS

1.低版本浏览器兼容H5新标签，引入：
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

2.低版本浏览器无法识别 Media Query，引入：
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

3.IE8 不支持CSS3 选择器，可引入 selectivizr-min.js 解决selectivizr-min.js 需要其它js库进行支持，不同js库对其支持程度不同，推荐使用nwmatcher.js；两者结合可满足CSS3 绝大多数选择器：
<script type="text/javascript" src="Lib/nwmatcher.js"></script> <script type="text/javascript" src="Lib/selectivizr-min.js"></script>

4.table的隔行变色用nth-child(even)不兼容，可引入：selectivizr-min.js；

5.CSS属性颜色渐变linear-gradient，低版本浏览器不兼容，可使用hack技术添加一纯色背景background-color: #f5840c\9;

6.inline-block下padding元素重叠，使用float: left替代display: inline-block实现水平布局；

7.行内样式垂直居中问题，有时line-height和高度相等在ie8无效果，使用vertical-align：middle；

8.ie8下button按钮左右两边留白的问题，用overflow:visible;padding:0;

9.低版本浏览器z-index失效，给元素都添加postion:relative；

10.让ie7\ie8支持CSS3 background-size，引入backgroundsize.min.htc，例子：

body {
height: 100%;
margin: 0;
background: url(images/126.jpg) center no-repeat;
background-size: cover;
-ms-behavior: url(backgroundsize.min.htc);
behavior: url(backgroundsize.min.htc);
}

其它

1.jquery 版本选择低于2.0

2.日历不要用H5的 type=”date”，引入JS库

3.ajax请求，中文编码问题（encodeUrl）