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

时间:2010-10-14 22:17:42

标签: jquery css internet-explorer clearfix

我有以下标记:

<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

2 个答案:

答案 0 :(得分: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)上建议

答案 1 :(得分:0)

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

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

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

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