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 相关文章推荐
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
jquery图形密码实现方法
Mar 11 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
浅析vue深复制
Jan 29 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
Vue实现随机验证码功能
Dec 29 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
Look And Say 序列php实现代码
2011/05/22 PHP
比较完整的微信开发php代码
2016/08/02 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
JS实现星星海特效
2019/12/24 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
Python类的基础入门知识
2008/11/24 Python
Python写的贪吃蛇游戏例子
2014/06/16 Python
python文件和目录操作函数小结
2014/07/11 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
Python 基础教程之包和类的用法
2017/02/23 Python
python3 shelve模块的详解
2017/07/08 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
十月份红领巾广播稿
2014/01/22 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
Vue.Draggable实现交换位置
2022/04/07 Vue.js