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;
}

第二把小提琴的来源（无动画）：

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