IE浏览器button元素的bug

button作为一个按钮元素，虽然不如有些元素使用那么频繁，但是也是HTML页面中不可或缺的元素之一。在过去button元素一直都没有受到Web开发人员的重视，其实它比的语义强许多，制定性也好许多。不过该元素在IE浏览器跟FF下的表现是不一样，而在IE浏览器中button元素存在一个重大的bug。它总是把其innerHTML神经错乱地当成其value值，因此，如果用它来提交表单时，可能产生一些负作用，会把正确的键值对覆盖了。

 

 
   
   
   
   
   
 
 

  错误的值

这恶性bug即使是jQuery1.3.2也没有修正它，因此不要迷信jQuery。不过，这bug也不是那么难修正的。如果光是想获得正确的value值，我们可以简单地使用如下代码：

var el = document.getElementById(“bb”);

el.attributes["value"].nodeValue

 


 
   
   
     
   
 
 

  错误的值


如果是提交表单时，就有点麻烦了。为了对比效果，我把错误的提交也做成例子了。留意以下运行框，点击按钮后如果地址栏的location search是nasami=correct_submit，说明提交成功，如果是nasami=error_submit，说明提交了错误的值了。

 


 
   
   
     
   
 
 
   

加上修正脚本之后……

 
   
   
   
   
 
 
   

这个问题是在IE浏览器中出现的，不过我只测试了IE6跟IE7，最新版的IE8并没有测试过，不知道在IE8浏览器中是否还存在button的BUY。

标签:IE浏览器BUGbutton元素IE Web