IEでこの単純なCSSフローティングの問題を修正するにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/477157

質問

左側に4つのdiv要素が浮かんでいます。 3番目のbrはクリアされます。
FirefoxおよびChromeでは、要素は期待どおりに配置されます。1番目と2番目の<=>は互いに隣接しており、3番目と4番目の<=>も上にあり、これらも互いに隣接しています。
一方IE7は、4番目の<=>を1番目と2番目の<=>に隣接させ、3番目の<=>を下に置きます。

2番目の<=>の後に<=>要素を追加することで修正できることはわかっていますが、必要のない場合はマークアップを編集したくないです。問題を修正するよりエレガントな方法はありますか？

しばらくの間、Googleで修正を試みましたが、見つかりませんでした。問題がいかに初歩的であるかを考えると、これはかなり驚くべきことです。おそらく私は明らかなものを見逃していますか、このような単純なCSSの問題をリストする参照サイトがありますか、または基本的なCSSについて無知ですか？

編集： Nazgulled <！> quot; solved <！> quot;の後、サンプルコードを少し複雑にしました。問題（コメントを参照）。現在は3つではなく4つの<=>があり、2番目ではなく3番目の<=>がクリアされます。

完全なソースコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>IE Float Test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            div
            {
                width: 100px;
                height: 100px;
                color: white;
                font-size: 3em;
                float: left;
            }

            #divone
            {
                background-color: red;
            }

            #divtwo
            {
                background-color: blue;
            }

            #divthree
            {
                background-color: green;
                clear: both;
            }

            #divfour
            {
                background-color: purple;
            }
        </style>
    </head>
    <body>
        <div id="divone">one</div>
        <div id="divtwo">two</div>
        <div id="divthree">three</div>
        <div id="divfour">four</div>
    </body>
</html>

Chromeの外観は次のとおりです。
Chromeサンプル

IE7の外観は次のとおりです。
IEサンプル

役に立ちましたか？

解決 2

数か月後...

この問題をCSSだけで解決しようとするのはあきらめました。これはIE7のバグであり、HTMLに触れることなく回避できません。

この浮動パターンの最終的な用途は、2つのdivが入力要素であり、他の2つの<=>が対応するラベルである形式でした。このパターンは大規模な形式で複数回使用されたため、エレガントなCSSのみのソリューションを探していました。

最終的にはオブジェクト指向CSSフレームワークを使用し、すべての要素を追加でラップしましたOOCSSの指示に従って、目的のレイアウトを作成するための<=> s。 IE7のCSS地獄から魂を救う唯一の方法であり、初期レイアウトを完了したらOOCSSはそれほど悪くありません。


実際には、一般的な答えは、これがCSSで何をしているのか本当にわからないときにあなたが投げかける一種の質問であるということです。青い月に一度複雑なレイアウトを作成する必要がある場合、おそらく何をしているのか分からないでしょう。この質問をしたときもそうでした。

IE7がCSSの適切なレンダリングに失敗するのは事実ですが、それは私の側の誤ったスコープのケースでもありました。 CSSは、素朴なプログラマーが理解できるような究極のレイアウト言語ではありません。また、CSSはHTMLの構造から完全に独立しているわけでもありません。もう一度CSSの基礎を実際に時間をかけて学習する必要があるときに、OOCSSフレームワークを使用して簡単な方法を選択することにしました。

残念ながら、これは期限の結果です。

他のヒント

これで実際の問題が解決するかどうかわかりませんが、次のようにサンプルを修正しました。

  • div
    • から float 属性を削除します
  • #divtwo
    • から clear 属性を削除します
  • float：left を #divtwo および #divthree
    • に追加します

これにより、FirefoxとIE 7（私がテストしたブラウザー）の両方でchromeサンプルのように見えます。

最終的な目標がここにあるかどうかはわかりませんが、コンテナ要素内に4つの<div>をすべて囲み、それに幅を適用して、clearから#divthreeスタイルを削除することをお勧めします。この方法で行うと、#divfourと#divoneをクリアせずに#divtwoとzoomの下に移動できます：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>IE Float Test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
                #divone, #divtwo, #divthree, #divfour
                {
                        width: 100px;
                        height: 100px;
                        color: white;
                        font-size: 3em;
                        float: left;
                }

                #divone
                {
                        background-color: red;
                }

                #divtwo
                {
                        background-color: blue;
                }

                #divthree
                {
                        background-color: green;
                }

                #divfour
                {
                        background-color: purple;
                }

                #container {
                        width: 200px;
                        zoom: 1;
                }
        </style>
    </head>
    <body>
    <div id="container">
        <div id="divone">one</div>
        <div id="divtwo">two</div>
        <div id="divthree">three</div>
        <div id="divfour">four</div>
    </div>
    </body>
</html>

#containerの<br>プロパティは、 IE6 / 7を回避するために必要です。エスケープフロートバグ。

上記の解決策が実行可能でない場合、clear: left;の後に<=>または<=>を<=>スタイルで追加できます：

<div id="divone">one</div>
<div id="divtwo">two</div>
<br style="clear: left;" />
<div id="divthree">three</div>
<div id="divfour">four</div>

これは、フローティングページレイアウトの例で使用されている手法です。 westciv.comで。

追加を試してください：

display:inline-block;

#divtwo。それが動作する場合、IE7の条件付きコメントを追加します

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top