IE9+已经不对document.createElement向下兼容的解决方法


Posted in Javascript onSeptember 14, 2015

今天发现某网站上,IE9和chrome中页面的功能居然有差异,于是在IE9下打开console,发现一堆js报错,用fiddler跟踪了一下,原来代码里有一句是这样的:

if(ie){
  var iframe = document.createElement('<iframe src="https://3water.com"></iframe>');
}

是的,问题就出在这里:DOM Exception: INVALID_CHARACTER_ERR (5)
因为在IE9里面,一些方法已经向w3c标准靠拢,和firefox、chrome浏览器等都保持了一致,包括这里的document.createElement方法。
因此,这里的代码需要改成:

if(ie && version < 9) {
  var iframe = document.createElement('<iframe src="https://3water.com"></iframe>');
} else {
  var iframe = document.createElement('iframe');
  iframe.setAttribute('src','https://3water.com');
}

不过,如果页面上加上了这个meta标签的话,能将IE9的文档模式强制降级到IE7:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

这样可以绕开这个BUG,不过我的建议是,如果页面上没有什么特殊的不能处理的,不要加这样的强制,会导致一些正常模式下不可控的现象。

在这里,我也顺便列几条我印象中的IE各个版本的差异性:

1、IE6
a、不支持png半透明图片,只能用filter实现
b、不支持css的max-width、max-height、min-width、min-height
其他不用说,一团糟,不过项目中还是得去兼容!

2、IE7
a、解决了png半透明图片的支持问题
b、解决了css的max-width、max-height、min-width、min-height支持
c、解决了css float导致的bug
d、增强了css选择器,比如,div节点也支持:hover伪类了
虽然解决了IE6的很多问题,不过IE7始终是一个中间产物,很多时候会出现让人摸不着头脑的样式问题,一般情况下,zoom:1是万能的

3、IE8
a、完全支持css2.1的选择器,向w3c看齐,逐步标准化
b、去掉了css中expression的支持,而增加-ms-的私有前缀
c、js方面,支持localStorage了
d、由于版本多,所以搞出了一个UA兼容模式:X-UA-Compatible

4、IE9
a、css3支持(部分)
b、html5支持(部分)
但是Javascript引擎换掉了,换成了chakra,性能很赞,同时也反映出:部分DOM操作已经不再向下兼容了。在这个时候,IE9已经实现w3c标准化了。

5、IE10
a、css3和html5的强支持
b、更多的-ms-私有属性(私有属性多了以后,会不会又走偏了?当然,这是chrome和firefox带头走偏的。。。各种私有属性!!!)

总之,咱们做前端的,就得跟着变化走,然后去适应这些变化。

Javascript 相关文章推荐
js工具方法弹出蒙版
May 08 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
Bootstrap按钮组实例详解
Jul 03 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
JS动态添加iframe的代码
Sep 14 #Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 #Javascript
window.onload使用指南
Sep 13 #Javascript
JS+CSS简单树形菜单实现方法
Sep 12 #Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 #Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 #Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 #Javascript
You might like
?繁体转换的class
2006/10/09 PHP
php实现mysql数据库备份类
2008/03/20 PHP
php 过滤危险html代码
2009/06/29 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
php简单的上传类分享
2016/05/15 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
JS中的BOM应用
2018/02/02 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
详解Python中的日志模块logging
2015/06/19 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
Python中修改字符串的四种方法
2018/11/02 Python
Python中Numpy mat的使用详解
2019/05/24 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
财务部岗位职责
2013/11/19 职场文书
高级工程师岗位职责
2013/12/15 职场文书
遗产继承公证书
2014/04/09 职场文书
学前班评语大全
2014/05/04 职场文书
运动员获奖感言
2014/08/15 职场文书
现役军人家属慰问信
2015/03/24 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技