0

我有以下标记：

<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
4

2 回答 2

1

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

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

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

然后，在交换视图时：

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

（这个解决方案是在jQuery 论坛上提出的）

于 2010-10-14T23:30:23.283 回答
0

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

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

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

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

于 2010-10-14T22:24:26.710 回答