IE9以下和chrome兼容性的问题

来源:互联网 时间:2017-01-22

IE9以下和chrome兼容性的问题

今天拿到一份非常老旧的代码,修改一下chrome兼容的问题,折腾了一下发现是代码不规范导致!
首先问题是这样的, 下拉菜单在IE9及以下正常打开无误,在chrome中下拉菜单不能正常打开。
IE9是这样的,如下:

chrome是这样的,如下:

然后debugger了一下代码,得到以下错误。JS代码通过document.getElementsById("channelId").style.display='block'。

html代码如下: 代码中并没有ID属性,只有一个name属性。

解决办法,如下: 换成getElementsByName("channelID")[0].style.display='block'。

解决完之后,我好像发现了点什么? IE10下的浏览器,是不是 name 和 id 这两个属性都可以通过 document.getElementById()拿到值啊? 最后找到的真相!在 IE6 IE7 IE8(Q) 中,支持以 document.getElementById(elementName) 的方式获取元素,而其他浏览器的任何元素均不支持该方式。
解决方案
在使用 document.getElementById 方法获取页面元素时,应传入元素的 id 属性值,而不能使用元素的 name 属性值。同时需注意页面中的元素的 id 属性值不能与其他元素的 name 属性值有重复。
最后 我始终认为这跟浏览器没多少关系。为啥当初写的时候不遵守规范呢?document.getElementById()  为啥在元素中不写上ID属性呢?虽然问题不大,但是想要兼容其他浏览器的时候,整个系统都要开始改了,然后开始反复的填坑,挖坑。这也是一种资源上的浪费哇!
参考文章:http://www.w3help.org/zh-cn/causes/SD9001


相关阅读:
Top