[英]How can I let this div expand and overflow it's container in IE8?
I found a nice css3 dropdown script, but I can't abandon ie8 users because last I read the are still 10% of visits. 我找到了一个不错的css3下拉脚本,但是我不能放弃ie8用户,因为我上次阅读仍然有10%的访问。 So, I tried this: 所以,我尝试了这个:
<div id="containerdiv" style="height: 35px; overflow: visible;" >
<a href="#"><img src="images/1.jpg"></a>
<a href="#"><img src="images/2.jpg"
onmouseenter="document.getElementById('navdd1').style.display = ''"></a>
<div id="navdd1"
style="
display: none;
margin-left: 100px;
background-image:url('images/blank_dropdown.jpg');
line-height: 35px;
width: 100px;"
onmouseleave="document.getElementById('navdd1').style.display = 'none'">
<a href="#">Link 1</a><br>
<a href="#">Link 2</a><br>
</div>
</div>
The mouseenter and mouseleave seem to do what I want, but the un-hidden div stretches the container instead of overflowing it. mouseenter和mouseleave似乎可以满足我的要求,但是未隐藏的div可以拉伸容器而不是使容器溢出。 I'll use php to detect their browser and only present this when they are on IE < 9. Ironically, the overflow portion of this does what I want in FF, but of course the mouseleave does not. 我将使用php来检测他们的浏览器,并且仅当它们在IE <9上时才显示它。具有讽刺意味的是,它的溢出部分满足了我在FF中的要求,但是mouseleave却没有。 How do I make this work? 我该如何工作?
You should set #navdd1
in position:absolute;
您应该将#navdd1
设置在position:absolute;
. 。
#navdd1 {
display: none;
margin-left: 100px;
background-image:url('images/blank_dropdown.jpg');
line-height: 35px;
width: 100px;
position:absolute;
}
and probably #containerdiv
in position:relative;
可能是#containerdiv
position:relative;
to easily give coordonates to #navdd1
. 轻松将#navdd1
捐赠给#navdd1
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.