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

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 来交换 View :

$('#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;
    });
  }
});

然后，在交换 View 时:

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

(此解决方案是在 jQuery forums 上提出的)