IEのjQuery slideToggleとdiv

jQueryのslideToggleとIEのdivに問題があります。私のコードは以下の通りです：IEのjQuery slideToggleとdiv

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 
<head> 
    <script type="text/javascript" src="jquery.js"></script> 

    <script type="text/javascript"> 

    $(document).ready(function() { 
     $(".toggle_container").hide(); 

     $("span.trigger").click(function(){ 
      $(this).next(".toggle_container").slideToggle("slow"); 
     }); 
    }); 

</script> 

<style type="text/css"> 
div#prog { width:250px; background:url('http://imgur.com/ozduu.gif') repeat-y; position:relative; margin:0 auto;} 
div#prog img { margin:0; padding:0; border:0;} 
div#prog_mid { width: 208px; margin:0 auto; padding: 0 20px;} 

img#prog_bottom { position:absolute; bottom:0;} 


span.trigger { width: 100%;} 
.toggle_container { margin:0 0 5px; padding:0; background:transparent; overflow:hidden; width:100%; clear:both;} 
.toggle_container .block { padding: 5px; } 

.block ul { list-style:none; padding-left:5px; padding-top:0; margin-top:0;} 
.block ul li a { color:#169494; width:100%; display:block; text-decoration:none;} 

</style> 
</head> 

<body> 
<div id="prog"> 
    <img src="http://imgur.com/po7R1.gif"/> 
    <div id="prog_mid"> 
     <h1>Phase 1</h1> 
     <img id="prog_dots" src="http://imgur.com/anDNd.gif"/> 
      <span class="trigger"><a href="#">CLICK HERE</a></span> 
      <div class="toggle_container"> 
       <div class="block"> 
        <ul> 
         <li><a href="">list item 1</a></li> 
         <li><a href="">list item 2</a></li> 
         <li><a href="">list item 3</a></li> 
         <li><a href="">list item 4</a></li> 
         <li><a href="">list item 5</a></li> 
        </ul> 
       </div> 
      </div> 
     <br /> 
    </div> 
    <img id="prog_bottom" src="http://imgur.com/r3fcf.gif" /> 
</div>

私はそれにわずかな勾配のあるボックスのように見えるdivを作ろうとしています。そのdivでは、リストを表示/非表示にしたいと考えています。私は、上の境界線としてのイメージ、下の境界線としてのもう一つのイメージ、および背景としてのイメージを持っています。リストはFirefoxとSafariで正常に動作しますが、IEの場合は面倒です。

FirefoxまたはSafariでは、divは展開/縮小され、どのようになっているかのように見えます。 IEでは、下の画像は、閉じていてもリストが開いている場合の位置に表示されます。

これを修正する方法についてのご意見はありますか？私はこの箱を正しい方法にするつもりですか？下のエッジ画像の絶対、IE7を台無しにしているように見える：

Demo Page →

出典

2009-07-17 Anonymous

どのバージョンのIEですか？ – SolutionYogi

IE8でうまく見える – RaYell

申し訳ありませんが、私はどのバージョンに言及するのを忘れていました。それはIE7でうんざりしています。ページをオンラインで利用できるようにする、SolutionYogiありがとうございます。 –

問題は、位置のあなたの使用にあります。

私は最善のアプローチは物事を少し簡素化することだと思います。主な背景については、1pxの高さの画像を縦に繰り返すことで、ここに入れられるコンテンツの量に柔軟性があり、下端の画像を絶対的に配置することができます。このアプローチでは、下端画像は、拡大または縮小されているかどうかにかかわらず、中央のコンテンツの下部に置かれます。

次のようにすると、画像を作成して赤の代わりに配置する必要があります（この問題を解決するには、1pxの高解像度画像の代わりに中間コンテンツの背景に赤を使用しました））。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 

<!-- 

    Created using http://jsbin.com 
    Source can be edited via http://jsbin.com/ugaza/edit 

--> 

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

    <script type="text/javascript"> 

    $(document).ready(function() { 
     $(".toggle_container").hide(); 

     $("span.trigger").click(function(){ 
      $(".toggle_container").slideToggle("slow"); 
     }); 
    }); 

</script> 

<style type="text/css"> 

div#prog { width:250px; background: red; margin:0 auto; } 
div#prog img { margin:0; padding:0; border:0; display: block; } 
div#prog_mid { width: 208px; margin:0 auto; padding: 0 20px; } 
div#prog img#prog_dots { margin: 10px 0; } 
span.trigger { width: 100%;} 
.toggle_container .block { padding: 5px; } 
.block ul { list-style:none; padding-left:5px; padding-top:0; margin-top:0;} 
.block ul li a { color:#169494; width:100%; display:block; text-decoration:none;} 

</style> 
</head> 

<body> 

<div id="prog"> 
    <img src="http://imgur.com/po7R1.gif"/> 
    <div id="prog_mid"> 
     <h1>Phase 1</h1> 
     <span class="trigger"><a href="#">CLICK HERE</a></span> 
     <img id="prog_dots" src="http://imgur.com/anDNd.gif"/> 

      <div class="toggle_container"> 
       <div class="block"> 
        <ul> 
         <li><a href="">list item 1</a></li> 
         <li><a href="">list item 2</a></li> 
         <li><a href="">list item 3</a></li> 
         <li><a href="">list item 4</a></li> 
         <li><a href="">list item 5</a></li> 
        </ul> 
       </div> 
      </div> 

    </div> 
    <img id="prog_bottom" src="http://imgur.com/r3fcf.gif" /> 
</div> 

</body> 

</html>

出典

2009-07-17 20:10:44 bbodien

それは働いた！どうもありがとう。 –

答えて

関連する問題