2

この問題は、私たちの最愛のInternetExplorer7で発生します。

アイテムのリストがあり、それぞれに非表示の子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 に答える