2

这个问题出现在我们心爱的 Internet Explorer 7 中：

我有一个项目列表，每个项目都有一个隐藏的子 div。当用户单击任何列表项中的“展开”按钮时，隐藏的 div 将向下展开并将其下方的所有内容推低。

这就像在 FF、Chrome、IE8 中一样有效——但 IE7 不会扩展父元素及其子元素。这很明显，因为最顶部的父容器在最底部有一个绝对定位的图像（是的......圆角） - 当内容扩展时不会被推下。

我猜那是因为绝对定位......只是想知道我是否应该为此尝试在 jQuery 中编写一些巨大的解决方法（假设我能够），或者这是否是某种已知问题。

我的 HTML：

<div id="container">
   <ul>
      <li>Click here to expand
          <div class="hide"></div>
      </li>
      <li>Click here to expand
          <div class="hide"></div>
      </li>
      <li>Click here to expand
          <div class="hide"></div>
      </li>
   </ul>

   <div id="containerbottom"></div>
</div>

CSS：

#container { position:relative; }
#container #containerbottom { position:absolute; bottom:0px; left:0px; }

jQuery 几乎是您日常的幻灯片功能：

$('ul li').click(function() {
   $(this).children('.hide').slideDown(200);
});

有任何想法吗？

4

1 回答 1

2

经过大量测试，这是我发现的：

$(document).ready(function(){

   $('ul li').click(function() {

     $(this).children('.hide').slideDown(200, function(){

       if($.browser.msie && $.browser.version == '7.0' ){
          $('#containerbottom').css('top',$(this).closest('ul').height()+'px');
       }

     });

   });

})

它不是那么好，但解决了问题......

于 2010-04-23T02:04:23.383 回答