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

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

if(ie){
  var iframe = document.createElement('<iframe src="http://www.jb51.net"></iframe>');
}

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

if(ie && version < 9) {
  var iframe = document.createElement('<iframe src="http://www.jb51.net"></iframe>');
} else {
  var iframe = document.createElement('iframe');
  iframe.setAttribute('src','http://www.jb51.net');
}

不过,如果页面上加上了这个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带头走偏的。。。各种私有属性!!!)

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

(0)

相关推荐

  • document.createElement()用法及注意事项(ff下不兼容)

    今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素 复制代码 代码如下: var inputObj    = document.createElement      ("<input type='text' size='8' style='border:0px;border-bottom:2px solid #c0c0c0;' " r

  • 动态加载js文件 document.createElement

    复制代码 代码如下: var Rash=true; var msg=""; function norash() { if (confirm("确定要取消吗")) Rash=false; } function rashit() { setInterval('getrss()',Inttime); } function getrss() {         if (Rash==true)         {         head=document.getElemen

  • document.createElement("A")比较不错的属性

    搞了一天,终于把A里面的属性弄出来 代码1: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 代码2: New Document function newelement(){ var a=document.createElement("a"); a.href="javascript:alert('A link.')"; a.innerHTML="aaa"; var img=new Image(); img.src="http

  • IE中document.createElement的iframe无法设置属性name的解决方法

    iframe 的name可以是link或者form的target,将link或form打开到这个iframe上. 之前在IE遇到过设置不了iframe的name属性 JavaScript代码 var iframe = document.createElement('iframe'); iframe.name = 'ifr'; //iframe.setAttribute('name', 'ifr'); //这样也不行 上面两种方式都无法设置.后来找到原来也可以这样创建 JavaScript代码 v

  • document.createElement()用法

    document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用.其中,appendChild() 方法在节点的子节点列表末添加新的子节点.insertBefore() 方法在节点的子节点列表任意位置插入新的节点. 下面,举例说明document.createElement()的用法.<div id="board"></div>例1: 复制代码 代码如下: <script

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

    今天发现某网站上,IE9和chrome中页面的功能居然有差异,于是在IE9下打开console,发现一堆js报错,用fiddler跟踪了一下,原来代码里有一句是这样的: if(ie){ var iframe = document.createElement('<iframe src="http://www.jb51.net"></iframe>'); } 是的,问题就出在这里:DOM Exception: INVALID_CHARACTER_ERR (5) 因为

  • fckeditor在ie9中无法弹出对话框的解决方法(弹出层兼容问题)

    所以无论是想在页面编辑器里粘贴内容,还是上传图片等凡是需要弹出窗口操作的东西都会有问题,想要进行其它的操作也只能重新刷新页面.原因是 IE 9 不支持var $=document.getElementById;这样的写法了. 解决方法可以这么来做: 打开这个文件, fckeditor/editor/js/fckeditorcode_ie.js ,找到第 38行的这个方法:FCKTools.RegisterDollarFunction 将原来的 复制代码 代码如下: FCKTools.Regist

  • JavaScript中解决多浏览器兼容性23个问题的快速解决方法

    一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa

  • js的.innerHTML = ""IE9下显示有错误的解决方法

    问题: 在用js动态创建html页面时: 复制代码 代码如下: var tab = document.createElement("table"); tab.innerHTML += "<td>订货单号</td>"+ "<td>单据日期</td>"+ "<td>商品类型</td>"+ "<td>订单属性</td>"

  • javascript createElement()创建input不能设置name属性的解决方法

    其中obj.name = "select";这句话并不能起到预期的作用,无论是看生成后的HTML代码还是观察使用document.getElementsByName()获取的数组长度,都会发现这个name设置并没有起作用.当然这种情况只出现在IE6和IE7中,而在FireFox中是没有问题的. Test function addInput(){ var div = document.getElementById("testDiv"); var obj = docum

  • ie9后浏览器fckeditor无法上传图片、弹出浮层内容不显示的解决方法

    第一种方法: 复制代码 代码如下: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> 讓IE9變成IE8在跑 第二种方法: 升级到IE9后,fckeditor在IE9里的弹出浮动层会出现bug,里面的内容不会出现.所以无论是想在页面编辑器里粘贴内容,还是上传图片等凡是需要弹出窗口操作的东西都会有问题,想要进行其它的操作也只能重新刷新页面.原因是IE9不支持var $=documen

  • js中Number数字数值运算后值不对的解决方法

    问题: 37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两个只有一位小数的数字相乘,怎么可能多出这么小数点出来. 我Google了一下,发现原来这是JavaScript浮点运算的一个bug. 比如:7*0.8 JavaScript算出来就是:5.6000000000000005 解决方法:网上找到了一些解决办法,就是重新写了一些浮点运算的函数. 下面就把这

随机推荐