jquery - スライドダウン()が完了する前に表示されるJquery IE8 divコンテンツ?

Question

うまくいけば基本的な質問です！標準の jquery スライドダウン div があり、その中に 3 つのボタンがあります。ホバーすると、div が通常の方法で下にスライドしてリンクが表示されます。FF / Safariではすべて問題ありませんが、IE8では、divがスライドして開いているため、コンテンツが表示され、本当に厄介な効果が得られます。デモ ページはhttp://james-golding.co.uk/staging/quocms/?page_id=29にあります。

jquery は非常に単純です。

<script type="text/javascript">

          $(document).ready(function() 

          {ShowActionOnOver();

                $(".expandingbox",this).hide(); // hide all 
                $(".insidered",this).slideDown(500);

          });

function ShowActionOnOver()

        {$(".content").hover(function(){
                  if( $(".insidered").is(":visible") ) { $(".insidered").slideUp(500); }
                  $(".expandingbox",this).slideDown(500);

              },

              function()

              {$(".expandingbox",this).slideUp(500); }

            );}

CSS は、この種の標準でもあります。

.content {height:120px;}
.rel {z-index: inherit; zoom: 1; /* For IE6 */ position:relative; }

.expandingbox {
    width: 210px;
    height:100px;
    margin: 0 auto 0px auto;
    padding: 7px 6px 0px 6px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    behavior: url(PIE.php);
    overflow : hidden;
}

.insidered {border: 2px solid #b60000;}

.steps {
    width: 195px;
    height: 13px;
    margin: 0px auto 3px auto;
    padding: 8px;
    -moz-border-radius: 11px ;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    behavior: url(PIE.php);
    }

.stepslast {
    width: 195px;
    height: 13px;
    margin: 0px auto 0px auto;
    padding: 8px;
    -moz-border-radius: 11px ;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    behavior: url(PIE.php);
}

.label {
    width: 101px;
    height: 17px;
    margin: 0 auto;
    padding: 8px 0  5px 0;
     -webkit-border-radius: 0px 0px 11px 11px;
    -moz-border-radius: 0px 0px 11px 11px;
    border-radius: 0px 0px 11px 11px;
    behavior: url(PIE.php);
    color:#FFFFFF;

}    

これについて何か考えていただければ幸いです-それは私を夢中にさせています!

ありがとう。

Answer 1

これはトリックを行います：.expandingbox insidered{overflow:hidden;}