.slideトグルと位置：Chromeで固定

Question

メニューで一部のコンテンツを表示して非表示にしています。ボタンをクリックすると、順序付けられていないリストと固定位置の画像が.slideToggle（）を使用して表示されます。これは機能しますが、複数の要素が表示されてから非表示になると、画像は最初に表示された場所に固定されたままになります。これを修正する方法はありますか？

HTML

<div class="menuBar"> 
<table cellpadding="2" cellspacing="0" border="0"> 
    <tr> 
     <td style="vertical-align:middle;"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV30EntertainmentButton.png" id="entertainment" width="124" height="25" /></td> 
     <td style="vertical-align:middle;"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV30ChoiceButton.png" id="choice" width="124" height="25" /></td> 
     <td style="vertical-align:middle;"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV30ChoiceXtraButton.png" id="choiceXtra" width="124" height="25" /></td> 
     <td style="vertical-align:middle;"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV30ChoiceUltimateButton.png" id="choiceUltimate" width="124" height="25" /></td> 
     <td style="vertical-align:middle;"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV30PremierButton.png" id="premier" width="124" height="25" /></td> 
    </tr> 
</table> 
</div> 
<div class="packages" id="ent"> 
<div class="pricePoint"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV3entertainment_en.png" width="190" height="439" /></div> 
    <ul id="entChan"> 
     <li><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/AandE_logo_4.jpg" height="56" width="70" title="A&E" /><span style="font-family:Arial, Helvetica, sans-serif; color:#959595; padding:20px; font-size:10px;">A&amp;E</span></li> 
     <li><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/ABCFamily_logo_4.jpg" height="56" width="70" title="ABC Family" /><span style="font-family:Arial, Helvetica, sans-serif; color:#959595; padding:20px; font-size:10px;">ABCF</span></li> 
    </ul> 
</div> 

<div class="packages" id="cho"> 
<div class="pricePoint"><img class="pricePoint" src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV3choice_en.png" width="190" height="439" /></div> 
<ul id="choChan"> 
     <li><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/AandE_logo_4.jpg" height="56" width="70" title="A&E" /><span style="font-family:Arial, Helvetica, sans-serif; color:#959595; padding:20px; font-size:10px;">A&amp;E</span></li> 
     <li><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/ABCFamily_logo_4.jpg" height="56" width="70" title="ABC Family" /><span style="font-family:Arial, Helvetica, sans-serif; color:#959595; padding:20px; font-size:10px;">ABCF</span></li> 
    </ul> 
</div> 

CSS

.menuBar { 
    position:fixed; 
    background-color:#fff; 
    top:55px; 
    left:0; 
    z-index:11; 
} 
.pricePoint { 
    position:fixed; 
    width:190px; 
    top:85px; 
} 

JS

$('#entertainment').click(function() { 
    $("#ent").slideToggle(); 

}); 
$('#choice').click(function() { 
    $("#cho").slideToggle(); 

}); 

Answer 1

今、私はあなたが何を意味するか見クロームでそれをしようとしたこと。クロムは文字通り定位置にあるようだ。

さらに動的なポジションが必要な場合は、浮動小数点数を使用する必要があります。

代わりにfloat:leftを試してみてください。これで問題は解決するはずです。

また、サイトでChromeの開発ツールを起動すると、要素が正しく配置されているようです。どちらが奇妙ですか？