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

解決策は、CSSの問題ではなくjQueryの問題として扱うことです。

まず、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

単純な「overflow: auto; width: auto;」の場合もあります。#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 に答える