私の Web アプリケーションには、絶対配置されたコンテンツ div を含むスライダーがあります。これも上に絶対配置されています: 30px で、左、右、下が 5px です。
ここにこれのフィドルがあります:
http://jsfiddle.net/MHNs7/
ソースも追加されています [1]。
スライダーの背景は赤で、囲まれたコンテンツ div は青です。
ほとんどのブラウザーでは問題なく動作しますが、IE7 ではコンテンツ div の高さが高すぎます。スライダーの下部に赤い「境界線」がありません。
これは、スライダーがアニメーション化されていない場合には発生しません - すべての JavaScript が削除され、スライダーが最初に表示されている場合、すべてがうまくいきます:
http://jsfiddle.net/TkZ4f/2/
ソースも追加されています [2]。
ブラウザウィンドウの何らかの「再レイアウト」がトリガーされた場合も問題は修正されますが、この「再レイアウト」がいつ、またはなぜ発生するのかについてはよくわかりませんでした。たとえば、IE 開発者ツールバーを開くと発生します。
ここで何が起こっているのか、それを修正する方法はありますか?
ありがとう、
ジョスト
最初のフィドルのソース (アニメーションとバグあり):
HTML [1]:
<div id="wrapper">
<button id="toggle">toggle</button>
<div id="slider">
<button id="contentchange">change content</button>
<div id="content">
<span>Content</span>
</div>
</div>
</div>
JS[1]:
jQuery(document).ready(function() {
var slider = jQuery('#slider');
slider.hide();
jQuery('#toggle').click(function() {
var slider = jQuery('#slider');
if (slider.is(':visible')) {
slider.stop().animate({
'height': '0',
'opacity': '0'
}, function() {
slider.hide();
});
}
else {
slider.show();
slider.stop().animate({
'height': '200px',
'opacity': '1'
});
}
});
jQuery('#contentchange').click(function() {
var content = jQuery('#content span');
content.text(Math.random().toString(2).substring(10));
});
});
CSS [1]:
#slider {
position: absolute;
width: 200px;
height: 0;
right: 0;
bottom: 0;
background-color: red;
}
#content {
position: absolute;
padding: 10px;
top: 40px;
left: 5px;
right: 5px;
bottom: 5px;
background: blue;
}
2 番目のフィドルのソース (アニメーションなし):
HTML [2]:
<div id="wrapper">
<button id="toggle">toggle</button>
<div id="slider">
<button id="contentchange">change content</button>
<div id="content">
<span>Content</span>
</div>
</div>
</div>
いいえJS [2]。
CSS [2]:
#slider {
position: absolute;
width: 200px;
height: 200px;
right: 0;
bottom: 0;
background-color: red;
}
#content {
position: absolute;
padding: 10px;
top: 40px;
left: 5px;
right: 5px;
bottom: 5px;
background: blue;
}