`
rewop998
  • 浏览: 37229 次
  • 来自: ...
社区版块
存档分类
最新评论

两个让人无语的IE BUG

阅读更多

两个让人无语的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" onsubmit="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元素设置背景。这对开发一个重视美术效果的网站确实是无理的要求。


 

分享到:
评论

相关推荐

    IEbug、IE6页面问题

    IEbug、IE6页面问题、IE6样式问题

    9个最常见IE的Bug及其fix

    在本文中,我们将深入探讨IE6中最为常见的九个Bug,并提供相应的解决方案,帮助Web开发者们解决这个曾经令人头疼的问题。 ### 1. 居中布局问题 在CSS布局中,将一个元素水平居中是最基本的需求之一。通常,通过...

    iebug总结jar包

    "iebug总结jar包"是一个专门针对这些问题的资源集合,它包含了处理IE bug的相关资料,特别是针对IE6的解决方案。以下是基于这个主题的详细知识点: 1. **IE6的渲染引擎**:IE6使用的是Trident渲染引擎,它与现代...

    ie6BUG解决方案

    然而,在IE6中,这两个方法都存在问题。 1. `opacity`属性:IE6并不支持CSS3的`opacity`属性。为了实现透明效果,开发者通常会依赖JavaScript库,如jQuery,或者使用专为IE6设计的滤镜(filter)属性。例如,可以...

    IE又一个让人吐血的BUG: 关于 table的position 和 select

    标题中的“IE又一个让人吐血的BUG: 关于 table的position 和 select”指的是在Internet Explorer(IE)浏览器中,开发者遇到的一个与HTML表格(table)的定位(position)属性和下拉选择框(select)相关的bug。这个...

    AD-IEBUG

    标题“AD-IEBUG”可能指的是一个针对Active Directory(AD)和Internet Explorer(IE)的错误或漏洞的调试工具...通过深入研究和实践,你可以更好地理解这两个关键组件的工作原理,以及如何有效地应对可能出现的故障。

    ie6-ie7 dom渲染bug demo

    ie6-ie7 dom渲染bug demo

    校验两个数据库表差异,并生成修改语句(BATE版,可能有BUG)

    校验两个数据库表差异,并生成修改语句(BATE版,可能有BUG)校验两个数据库表差异,并生成修改语句(BATE版,可能有BUG)校验两个数据库表差异,并生成修改语句(BATE版,可能有BUG)校验两个数据库表差异,并生成修改语句(BATE...

    我发现一个IE8的Bug

    标题中的“我发现一个IE8的Bug”提示我们,这个压缩包可能包含有关Internet Explorer 8浏览器的一个已知或新发现的软件缺陷的信息。在描述中,我们只得到了一个指向博客文章的链接,该链接可能提供了关于这个Bug的...

    无语网站排名批量查询工具 v20130730.zip

    可自由选择仅查询一个搜索引擎的数据或者是四个搜索引擎一同查询。 软件完全独立,仅依靠搜索引擎本身。所以就算本站关闭了,软件依然可以使用。 查询的速度完全由使用者电脑的配置和网速决定,无其它因素影响。 ...

    莫名其妙的IE 3像素Bug

    标题中的“莫名其妙的IE 3像素Bug...总的来说,这个3像素Bug是前端开发中一个常见的挑战,尤其是对那些需要确保网站在IE中正常显示的开发者来说。理解这个问题的原因和解决方法对于提升跨浏览器兼容性的技能至关重要。

    css常见的bug(ie)

    当两个浮动的DIV相邻时,IE可能会在它们之间显示3像素的间隙。解决方法包括使相邻元素也浮动,或者为已浮动的元素添加负margin。 8. **宽度和高度的问题**: IE不支持`min-`前缀,但它实际上把正常的width和...

    IE 常见bug 及其fix

    本篇将详细介绍9个最常见的IE bug及其修复方法。 1. 居中布局问题 在CSS布局中,将元素居中对齐是很常见的需求。一般通过`margin: auto;`实现,但在IE6中会出现问题。解决方法是在父元素中添加`text-align: center;...

    ie6bug问题解决

    这个压缩包文件"ie6bug"显然专注于解决与IE6相关的技术挑战。下面,我们将深入探讨IE6中的常见问题以及解决策略。 1. **PNG透明度问题**:IE6不支持PNG8和PNG24格式的阿尔法透明度,导致半透明图片显示不正常。解决...

    ie6 bug bug

    计师在输出时,最头痛的就是...而我看来,其实不然,既然ie6还没“死”,还有很多人在用,特别在china,自然有它存在的理由!在此不再多说!下面以一个列子来说明用float 解决ie6的兼容性。 一、要布局的导航,如图一

    最常见的9种IE_css_bug及fix

    ### 最常见的9种IE_css_bug及fix:深入解析与解决方案 #### 1. 居中布局问题 在Web开发中,将元素居中是极为常见的需求。通过设置`margin: auto;`通常能够轻松实现这一目标,但在IE6中,这种方法却会遇到问题。...

    css规范_IE bug,IE与Firefox的CSS兼容问题.....整理

    在网页开发过程中,CSS规范和浏览器兼容性是两个至关重要的考虑因素。本文主要探讨了针对IE浏览器,尤其是IE与Firefox之间存在的CSS兼容性问题,并提供了一些解决方案和编写高效、维护友好的CSS代码的规范。 一、...

Global site tag (gtag.js) - Google Analytics