我找到了一个不错的 css3 下拉脚本,但我不能放弃 ie8 用户,因为我最后读到的仍然是 10% 的访问量。 所以,我尝试了这个:
<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>
mouseenter 和 mouseleave 似乎可以满足我的要求,但未隐藏的 div 会拉伸(stretch)容器而不是溢出容器。我将使用 php 来检测他们的浏览器,并且只在他们使用 IE < 9 时显示它。具有讽刺意味的是,它的溢出部分做了我在 FF 中想要的,但当然 mouseleave 没有。我该如何进行这项工作?
最佳答案
您应该在position:absolute;
中设置#navdd1
。
#navdd1 {
display: none;
margin-left: 100px;
background-image:url('images/blank_dropdown.jpg');
line-height: 35px;
width: 100px;
position:absolute;
}
可能还有 #containerdiv
在 position:relative;
中,以便轻松地为 #navdd1
提供坐标。
关于php - 我怎样才能让这个 div 在 IE8 中扩展并溢出它的容器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17777441/