dongshungai4857
dongshungai4857
2013-07-21 22:07

我怎样才能让这个div在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. 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. 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. How do I make this work?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dsznndq4912405 dsznndq4912405 8年前

    You should set #navdd1 in 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; to easily give coordonates to #navdd1.

    点赞 评论 复制链接分享