Question

我有以下标记：

<nav id='tab_links'>
  <a href='#view1'>One</a>
  <a href='#view2'>Two</a>
</nav>
<div id='container'>
  <div id='view1'>Short Content</div>
  <div id='view2'>Much longer content</div>
</div>
<footer>
 <input type='submit' />
</footer>

以及以下样式：

#view2 { display: none; }
#footer { display: block; clear: both; text-align: right; }
#footer * { display: inline-block; text-align: center; }

我使用以下jQuery来交换视图：

$('#tab_links a').click(function() {
  var tabToShow = $($(this).attr('href'));
  var otherTabs = tabToShow.siblings();
  tabToShow.show();
  otherTabs.hide();
});

当我为view1内容换出view2内容时，页脚会停留在原来的位置，悬停在新内容的中间位置之上。如果我将鼠标悬停在页脚内容上，它会跳到原位。如果我将内容还原为view1，则页脚会再次停留在view2的位置，远远低于container的结尾。

我可以应用哪些样式来使IE重新定位页脚？我已经尝试了以下各种组合：

将clearfix应用于#container
将clearfix应用于#footer
将height: auto应用于#container
将height: 30px应用于#footer input
将widgth: 100px应用于#footer input

Answer 1

解决方案是将其视为jQuery问题而不是CSS问题。

首先，在jQuery元素上定义一个forceRedraw函数，只需将元素的类设置为现有类：

jQuery.fn.extend({
  forceRedraw: function() {
    jQuery(this).each(function() {
      this.className = this.className;
    });
  }
});

然后，在交换视图时：

$('#view1').hide();
$('#view2').show();
$('#footer').forceRedraw();

（此解决方案在jQuery forums）上建议

Answer 2

有时简单的“溢出：自动;宽度：自动;”应用于#container将解决问题。

请参阅：http://www.atbskate.com/trusktr/2010/03/05/clearing-floats-with-the-overflowauto-css-property/

或者：http://www.quirksmode.org/css/clearing.html

这是你问题的解决方案吗？

在兄弟垂直调整大小后，如何让IE正确定位元素？

2 个答案: