ie 两个bug(透明和absolute时,隐藏和显示子元素有关问题)
ie 两个bug(透明和absolute时,隐藏和显示子元素问题)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-CN"> <head> <meta http-equiv="content-type" content="text/html; charset=GB2312"/> <style> html,body{ height:100%; width :100%; } #wrapper{ border:1px solid red; filter:alpha(opacity=80); position:absolute; width:1000px; height:300px; /* height:1000px; */ } #wrapper div{ background:transparent url(test.gif); width:100px; height:100px; border:1px solid red; position:absolute; cursor:pointer; } </style> <script> function hiddenD(){ var divs = document.getElementById("wrapper").getElementsByTagName("div"); for(var i=0;i<divs.length;i++){ divs[i].style.display="none"; } } function showD(){ var divs = document.getElementById("wrapper").getElementsByTagName("div"); for(var i=0;i<divs.length;i++){ divs[i].style.display=""; } } function hiddenW(){ document.getElementById("wrapper").style.display = "none"; } function showW(){ document.getElementById("wrapper").style.display = ""; } </script> </head> <body> <input type="button" value="隐藏wrapper" onclick="hiddenW()"> <input type="button" value="显示wrapper" onclick="showW()"> <input type="button" value="隐藏" onclick="hiddenD()"> <input type="button" value="显示" onclick="showD()"> <div id="wrapper"> <div style="top:0px"></div> <div style="top:100px"></div> <div style="top:200px"></div> <div style="top:300px"></div> <div style="top:400px"></div> </div> </body> </html> <!-- ie6和ie7类似 filter:alpha(opacity=80);时,会导致超出wrapper的部分被截断, 隐藏wrapper,再隐藏wrapper里面的div, 然后显示wrapper,发现里面的div没有隐藏,这时候再点隐藏,失效了 ie8不会截断,不隐藏wrapper的情况下点击显示和隐藏,发现没截断的部分始终会显示,其余浏览器没有此问题 --> 网名 : 天堂左我往右
1 楼
zhouyrt
2009-08-25
IE下的bug这么多呢。开发时要谨慎谨慎啊。