两个让人无语的IE BUG
很多人总是拿IE的安全说事，其实多数是人的问题，而IE对HTML/CSS的处理上的BUG才是最令人头痛的，特别是那些毫无逻辑性而言的问题，下面的两个就是。
BUG 1 - IE6居然分不清name和id
最简化重现代码：
<!-->
<html>
<head>
<title>Test</title>
</head>
<body>
<input name="txt" type="radio">
<input name="txt" type="radio">
<input name="txt" type="radio">
<p id="txt">Hello</p>
<script type="text/javascript">
alert(document.getElementsByName('txt').length);
</script>
</body>
</html>
<-->
逻辑很简单，我希望用js得到该页面名为txt的单选框个数：document.getElementsByName('txt').length。猜猜IE6会显示多少：4。因为IE6把id=txt的元素也算上了。貌似这个BUG很好发现原因，但真实的HTML页面元素很多，不费一番功夫不会想到这是IE的问题。
解决办法：当你需要使用getElementsByName函数时，千万不要让页面的name元素和某元素的id重名。
BUG 2 - 使用带背景的iframe元素导致iframe产生怪异的行为
如果重现上面那个BUG只要睁大眼睛的话，下面这个BUG会另你试图给身边的朋友推荐Firefox。
最简化重现代码：
把以下内容保存为page.html
<!-->
<html>
<head>
<title>Test</title>
</head>
<body>
<div>
Test
<iframe height="100" src="frame.html" width="100%"></iframe>
</div>
</body>
</html>
<-->
把以下内容保存为frame.html
<!-->
<html>
<head>
<title>Frame</title>
<script type="text/javascript">
function check_submit(frm)
{
document.getElementById('btn').disabled=true;
return true;
}
</script>
<style type="text/css">
#btn{
background: url('btn.gif') no-repeat;
}
</style>
</head>
<body>
<form action="frame.html" method="post" οnsubmit="return check_submit(this)">
<input id="btn" type="submit" value="Test" />
</form>
</body>
</html>
<-->
然后准备一个btn.gif文件，把btn.gif、page.html和frame.html上传到同一文件夹，访问page.html文件。
这个组合为了实现一个效果：page.html中使用iframe包含一个表单，用户在 iframe 中的表单(由frame.html输出)提交表单（一个例子就是donews首页顶部的登录iframe），在提交后禁用提交按钮防止重复提交。但是就这样一个简单的思路在IE中会出现起个奇怪的行文：当表单提交完全完成后，IE的状态栏会出现一个从0开始的新进度条，要等将近2分钟才会消失。
为了挖出上面的最简话代码，我花费了整整一下午的时间，从庞大的web应用中剔除无关的代码，保存同样无关的代码。导致这个BUG的表面原因是document.getElementById('btn').disabled=true;一句，当试图在提交表单后禁止该button(或访问表单任意元素的属性)时就会产生这个现象。但真正的罪魁是btn的背景，当删除#btn中的background: url('btn.gif') no-repeat;(或设置一个不存在的文件做背景)后，这个BUG就会自行消失，看来那个进度条是在试图加载btn.gif文件。
解决办法：当你需要提交iframe中的表单时，要么不要修改iframe中的其它元素属性（包括不能禁用提交按钮防止重复提交），要么不要给提交按钮或其它iframe元素设置背景。这对开发一个重视美术效果的网站确实是无理的要求。
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
