ie6问题_html/css_WEB-ITnose-html教程-PHP中文网

回复讨论(解决方案)

首页

web前端

html教程

ie6问题_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:33 AM

http://topic.csdn.net/u/20120411/15/ae880ebf-f4cc-4152-9724-37fdfe14219c.html?64791

谁能解释下这是为毛？？

回复讨论(解决方案)

加background 是为了触发layout

把 #b的position 去掉，不加background mouseleave也是可以了，问题就出现在position:absolute;
ie6解析怪异，不像DOM那样依旧认识#a下面#b的width及height

ie6只会认得内容来充满box，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="http://code.jquery.com/jquery-latest.js"></script><style type="text/css">    *{margin:0;padding:0;}</style><script type="text/javascript">    $(document).ready(function(e) {       $("#a").mouseover(function(e) {            $("#b").slideDown();        });         $("#a").mouseleave(function(e) {                        $("#b").slideUp();        });    });</script></head><body><div id="a" style="position:relative;width:100px;height:30px;border:1px solid #cccccc;">    <div id="b" style="position:absolute;top:30px;left:0px;width:300px;height:400px;border:1px solid #cccccc;display:none;">	1111111111111111111111	</div></div></body></html>

登录后复制

鼠标出了11111内容 box才会缩回去，所以这里加个background，让它充满整个box。

加background 是为了触发layout

把 #b的position 去掉，不加background mouseleave也是可以了，问题就出现在position:absolute;
ie6解析怪异，不像DOM那样依旧认识#a下面#b的width及height

ie6只会认得内容来充满box，如下：
HTML code

+11

路过，学习，不同浏览器解析

推荐楼主少用JQ ,需然效果好,但是浏览器有些识别不了

    $(document).ready(function(e) {       $("#a").mouseover(function(e) {            $("#b").slideDown();        });         $("#a").mouseleave(function(e) {              var to = e.relatedTarget || e.toElement;//获得鼠标移出后进入的元素            alert(to.tagName)			            $("#b").slideUp();        });    });

登录后复制

去掉背景和不去掉背景分别高度一下
你就明白了

去掉背景和不去掉背景分别运行一下
你就明白了