0

私の 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;
}
4

0 に答える 0