web-dev-qa-db-ja.com

float：IE7で改行します

私はしばらくの間フロートの問題に悩まされてきたので、コミュニティが再び私を助けてくれることを願っています。私は新しいウェブフォームを持っています ここ 。いつものように、IE7（または互換性のあるIE8）以外のすべてで問題なく見えます。

何らかの理由で、一部のコンテナは、フォームテキストの下の新しい行にフォームフィールドが表示されます。 CSSは私の強みではありません。そうでなければ、これを修正できると確信しています。誰かが私がここで欠けているものを教えてもらえますか？

フォームテキストにfloat：leftを追加しようとしましたが、それは他のすべての混乱に終わりました。

cssinternet-explorer-7css-float
22
CoreyT

マークアップを少し変更してみてください。フロートのあるアイテムをフロートのないアイテムの前に配置します（同じ行から）。それは役立つはずです。

76
oryol

これが投稿されてから久しぶりですが、気に入った解決策を見つけました。 Gistは、IE7のCSSで「expression」タグを使用して、浮動要素をDOMの親の最初の要素に移動するだけです。他のすべてのブラウザーでは意味的に正しいですが、IE7では、浮動要素を移動するようにDOMを変更します。

私の場合、私は持っています：

<div>
    <h1></h1>...<p>any other content...</p>
    <small class="pull-right"></small>
</div>

プルライト用のCSSでは、次のものを使用します。

.pull-right {
    float:right;
    *zoom: ~"expression( this.runtimeStyle.zoom='1',parentNode.insertBefore( this,parentNode.firstChild ))";
}

その結果、IE7は私の<small>を<div>の最初の要素に移動しますが、他のすべてのブラウザーはマークアップをそのままにします。

これはすべての人に役立つとは限りません。技術的には、マークアップを変更していますが、IE7のDOMでのみであり、JavaScriptソリューションでもあります。

また、表現にパフォーマンスの問題があるかもしれないことを理解しています（遅い）ので、このようなフロートがたくさんあるのは理想的ではないかもしれません。私の場合、それはうまく機能し、意味的に正しいHTMLを維持することができました。

2
Tom Greever

テキスト用に持っているスパンタグを固定幅にし、それらを左にフロートさせ、対応させたい入力フィールドに対して同じことを行うことができます。また、フォームでスパンタグの代わりにラベルタグを使用することをお勧めします。確かな理由はありません。ラベルは、spanタグが実行していることを正確に表すためのものでした。

0
Brian

あなたがしたいのは、clear：bothをfloat要素の最後の兄弟として追加することです。

だから次のようなもの：

<div style="float:left;">
  <!-- children of div here -->
</div>
<div style="clear:both;">
  <!-- leave empty -->
</div>
0
Dave