IE9以下和chrome兼容性的问题

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