IE6下绝对定位BUG
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>N!</title> <style> .cover{ background-color:#0ff; height:auto!important; min-height:65px; _height:65px; position:relative; width:200px; } .containImg{ height:200px; position:relative; width:200px; } .noImage{ height:65px; position:relative; width:200px; } .PersonImg{ background-color:#f00; height:50px; position:absolute; left:25px; bottom:-25px; width:50px; } .btn{ margin-left:150px; } .hide{ display:none; } </style> </head> <body> <div id="cover" class="cover"> <div class="containImg" id="containImg">height:200px;(高度同父元素)</div> <div class="noImage hide" id="noImage">height:65px;</div> <div class="PersonImg" id="PersonImg">absolut</div> <input class="btn" id="btn" type="button" value="提交"/> </div> <script type="text/javascript"> var btn = document.getElementById('btn'); var containImg = document.getElementById('containImg'); var noImage = document.getElementById('noImage'); var PersonImg = document.getElementById('PersonImg'); btn.onclick = function(){ containImg.className = 'containImg hide'; noImage.className = 'noImage'; } </script> </body> </html>
上面这段代码在其他浏览器时点提交显示效果为:
在IE6浏览器上点提交显示效果为:
这个bug的解决方法就是需要重置bottom值;
在click事件中加入代码:
PersonImg.style.bottom = PersonImg.currentStyle['bottom'];
完整的可运行代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>N!</title> <style> .cover{ background-color:#0ff; height:auto!important; min-height:65px; _height:65px; position:relative; width:200px; } .containImg{ height:200px; position:relative; width:200px; } .noImage{ height:65px; position:relative; width:200px; } .PersonImg{ background-color:#f00; height:50px; position:absolute; left:25px; bottom:-25px; width:50px; } .btn{ margin-left:150px; } .hide{ display:none; } </style> </head> <body> <div id="cover" class="cover"> <div class="containImg" id="containImg"></div> <div class="noImage hide" id="noImage"></div> <div class="PersonImg" id="PersonImg"></div> <input class="btn" id="btn" type="button" value="提交"/> </div> <script type="text/javascript"> var btn = document.getElementById('btn'); var containImg = document.getElementById('containImg'); var noImage = document.getElementById('noImage'); var PersonImg = document.getElementById('PersonImg'); btn.onclick = function(){ containImg.className = 'containImg hide'; noImage.className = 'noImage'; PersonImg.style.bottom = PersonImg.currentStyle['bottom']; } </script> </body> </html>
这个bug还是别人帮忙解决的