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

【问题标题】：How do I get IE to properly reposition an element after a sibling resizes vertically?在兄弟元素垂直调整大小后，如何让 IE 正确定位元素？
【发布时间】：2011-04-25 16:20:07
【问题描述】：

我有以下标记：

<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

【问题讨论】：

我还尝试在#container 中添加<div style="clear:both;"></div>。这也无法在内容扩展时将页脚向下推（或在内容收缩时将其向上推）。这让我怀疑这不是浮动问题。
我还尝试链接切换视图的隐藏/显示事件。 $('#view1').hide(0, function() { $('#view2').show(); }); 的行为与 $('#view1').hide(); 相同$('#view2').show();`
这个问题似乎非常密切相关：forum.jquery.com/topic/force-ie-redraw（唉，它没有解决）

标签： jquery css internet-explorer clearfix

【解决方案1】：

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

看到这个：http://www.atbskate.com/trusktr/2010/03/05/clearing-floats-with-the-overflowauto-css-property/

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

这是解决您问题的方法吗？

【讨论】：

遗憾的是，这似乎不是我遇到的问题。视图本身没有浮动（尽管它们确实有一些浮动的内容）。
hmmmm...您说#views 中有一些浮动内容...也许将建议的修复应用于#view1 和#view2 div（以及任何其他包含浮动元素的内容））？
...让它们全部展开。
编辑和发布您的整个代码可能会帮助我们找出问题所在！

【解决方案2】：

解决方法是将其视为 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 上提出的）

【讨论】：