IE浏览器兼容方案

1、使用高版本渲染模式

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>

2、css hack

(1)条件注释

<!--[if IE 6]>coding...<![endif]--> //ie6
<!--[if lte IE 9]>coding...<![endif]--> //小于等于ie9

(2)属性前缀

_background-color:#000; //ie6
*background-color:#000; //ie6 ie7 等等

(3)ie filter

如:

opacity: .5;
/* IE 4-9 */
filter:alpha(opacity=50);

3、兼容性插件

Html5shiv:使浏览器兼容HTML5标签语法。
respond:A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
bsie:在IE6上支持大部分bootstrap的特性。
IE-CSS3/PIE:使ie6-9支持CSS3。
 
4、提示版本升级
(1)页面头部提示
//以下代码 放在页面中或js文件中 都可以
(function(w){if(!("WebSocket"in w&&2===w.WebSocket.CLOSING)){var d=document.createElement("div");d.className="browsehappy";d.innerHTML='<div style="width:100%;height:100px;font-size:20px;line-height:100px;text-align:center;background-color:#E90D24;color:#fff;margin-bottom:40px;">\u4f60\u7684\u6d4f\u89c8\u5668\u5b9e\u5728<strong>\u592a\u592a\u65e7\u4e86</strong>\uff0c\u592a\u592a\u65e7\u4e86 <a target="_blank" href="http://browsehappy.osfipin.com/" style="background-color:#31b0d5;border-color: #269abc;text-decoration: none;padding: 6px 12px;background-image: none;border: 1px solid transparent;border-radius: 4px;color:#FFEB3B;">\u7acb\u5373\u5347\u7ea7</a></div>';var f=function(){var s=document.getElementsByTagName("body")[0];if("undefined"==typeof(s)){setTimeout(f,10)}else{s.insertBefore(d,s.firstChild)}};f()}}(window));

(2)直接跳转

//放在页面中或js文件中 都可以
(function(w){if(!("WebSocket"in w&&2===w.WebSocket.CLOSING)){w.location.replace("http://browsehappy.osfipin.com/");}}(window));
 
上一篇:解决浏览器background-image属性不支持css3动画


下一篇:iOS 全局竖屏 单个viewcontroller点击按钮支持横屏