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));
 

IE浏览器兼容方案的更多相关文章

  1. 抛弃 CSS Hacks 后的浏览器兼容方案

    一般情况下的浏览器兼容需要考虑 IE6/7/8 三种 IE 版本,当然在 IE9 开始逐步推向市场后,又会有更多的衍生版本.所以我目前只考虑 IE7~9 版本的兼容情况.涉及到的条件注释代码如下: & ...

  2. HTML5全屏浏览器兼容方案

    最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit  Firefox  IE Element.requestFullscreen() ...

  3. jQuery-1.9.1源码分析系列(七) 钩子(hooks)机制及浏览器兼容

    处理浏览器兼容问题实际上不是jQuery的精髓,毕竟让技术员想方设法取弥补浏览器的过错从而使得代码乱七八糟不是个好事.一些特殊情况的处理,完全实在浪费浏览器的性能:突兀的兼容解决使得的代码看起来既不美 ...

  4. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  5. IE、FF、Safari、OP不同浏览器兼容报告

    IE.FF.Safari.OP不同浏览器兼容报告 1         浏览器内核简介 Trident IE浏览器(GreenBrowser绿色浏览器, 遨游浏览器....都是IE) Geckos Fi ...

  6. 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  7. 老式浏览器兼容HTML5和CSS3的问题

      1.让老式浏览器支持HTML5   HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因 ...

  8. 第四节:教你如何快速让浏览器兼容ES6特性

    写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节前端君会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用 ...

  9. 解决浏览器兼容ES6特性

    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...

随机推荐

  1. 基于VHDL利用PS2键盘控制的电子密码锁设计

    基于VHDL利用PS2键盘控制的密码锁设计 附件:下载地址 中文摘要 摘 要:现代社会,人们的安全意识正在不断提升.按键密码锁由于其具有方便性.低成本等特征,还是大有用武之地的.但是通常的按键密码锁开 ...

  2. 关闭Windows Server 2012的IE增强安全配置

    在Windows Server 2012中,IE的安全性被增强,对于没有加入信任站点的网址会弹出提示框: 微软这样做是为了增强IE的安全性,但是在实际的使用过程中并不是很方便.如果是个人电脑安装了Wi ...

  3. ExtJS 4.2 教程-01:Hello ExtJS

    转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-1-hello-extjs, 本文还发布在了ExtJS教程网站起飞网上面,如果转载请保留本段声明,谢谢合作 ...

  4. docker 删除无用的镜像文件的命令小计

    df -h  查看当前服务器的内存情况 docker system prune  删除无用镜像文件命令 执行ok之后,再次查看内存情况.

  5. [转]有关Apache alias的一点问题

    转自:http://www.thinkphp.cn/topic/11973.html Apache 的Alias 指令映射URL到文件系统的特定区域 一个简单的例子: Alias /mytest /w ...

  6. swift3.0:sqlite3的使用

    介绍 一.sqlite是纯C语言中底层的数据库,在OC和Swift中都是经常使用的数据库,在开发中,可以使用代码创建数据库,可以使用图形化界面创建数据库.例如SQLiteManager.SQLiteS ...

  7. 读书笔记,《Java8实战》第一章,为什么要关心 Java8

       开篇作者就提出,Java8所做的改变在许多方面比java历史上任何一次改变都深远.而且好消息是,这些改变会让你编辑程序来更容易,再也不用写类似类似于以前的swing中的事件处理函数的啰嗦代码了. ...

  8. iOS开发-UITabBarController详解

    我们在开发中经常会使用到UITabBarController来布局App应用,使用UITabBarController可以使应用看起来更加的清晰,iOS系统的闹钟程序,ipod程序都是非常好的说明和A ...

  9. 转:centos7 安装与使用 postgreSQL

    一. 安装与基本说明都非常的详细. https://www.digitalocean.com/community/tutorials/how-to-install-and-use-postgresql ...

  10. Twitter Lite以及大规模的高性能React渐进式网络应用

    Twitter Lite以及大规模的高性能React渐进式网络应用 原文:Twitter Lite and High Performance React Progressive Web Apps at ...