Question

我的网络应用程序中有一个绝对定位的滑块，它包含一个内容div，它也绝对位于顶部：30px，左，右和底部为5px。

这是一个小提琴：
http://jsfiddle.net/MHNs7/
来源也附加[1]。

滑块有红色背景，封闭的内容div为蓝色。

在大多数浏览器中，它工作正常，但在IE7中，内容高度很高 - 滑块底部没有红色“边框”。

滑块未设置动画时不会发生这种情况 - 如果删除所有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;
}

IE7中的Layouting滑块具有动画和绝对定位功能

0 个答案: