Question

我找到了一个不错的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拉伸容器而不是溢出它。我将使用php来检测他们的浏览器，并且只有当他们在IE＆lt; 9.具有讽刺意味的是，这个溢出部分在FF中做了我想要的，但当然鼠标却没有。我如何使这项工作？

Answer 1

您应该在#navdd1中设置position:absolute;。

#navdd1 {
          display: none; 
          margin-left: 100px; 
          background-image:url('images/blank_dropdown.jpg');
          line-height: 35px;
          width: 100px;
          position:absolute;
}

并且#containerdiv中的position:relative;可能很容易向#navdd1提供协调。

我怎样才能让这个div在IE8中扩展并溢出它的容器？

1 个答案: