3

左に 4 つのdiv要素が浮かんでいます。3つ目divはクリア。
Firefox と Chrome では、要素は期待どおりに配置されます。1 番目と 2 番目divの は互いに隣接しており、3 番目と 4 番目divの も互いに隣接しています。
一方、IE7 は 4 番目を 1 番目と 2 番目の s にdiv隣接させ、3 番目を下に配置します。divdiv

br2 番目の後に要素を追加することで修正できることはわかってdivいますが、必要がなければマークアップを編集したくありません。問題を解決するよりエレガントな方法はありますか?

私はしばらくの間、修正を求めて Google を試してきましたが、問題がどれほど初歩的なものに見えるかを考えると、驚くべきことに見つかりませんでした。このような単純な CSS の問題を一覧表示している参照サイトはありますか、それとも基本的な CSS について無知なだけですか?

編集: Nazgulled が問題を「解決」した後、サンプル コードを少し複雑にしました (コメントを参照)。3 つではなく4 つdivの sがありdiv、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 では次のようになります。
クロムサンプル

IE7 では次のようになります。
IE サンプル

4

4 に答える 4

5

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

  • divからfloat属性を削除します
  • #divtwoからclear属性を削除します
  • floatを追加： ＃divtwoと#divthreeに左

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

于 2009-01-25T05:07:44.143 に答える
3

数ヶ月後…

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

この浮動パターンの最終的な適用は、divのうちの 2 つが入力要素であり、他の 2 つdivが対応するラベルである形式でした。このパターンは大きなフォームで何度も使用されていたため、エレガントな CSS のみのソリューションを探していました。

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


実のところ、一般的な答えは、CSS を使って何をしているのかよくわからないときに、このような質問をするというものです。ブルームーンで一度複雑なレイアウトを作成する必要がある場合、おそらく何をしているのかわかりません。私がこの質問をしたときのように。

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

悲しいかな、これは締め切りの結果です。

于 2009-10-04T07:06:17.637 に答える
2

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

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

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

上記の解決策が実行できない場合は、スタイルを使用して<br>または<div>後に追加できます。#divtwoclear: 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 のフローティング ページ レイアウトの例で使用されている手法です。

于 2009-01-25T08:06:41.443 に答える
0

追加してみてください：

display:inline-block;

#divtwoで。それがうまくいけば、もちろんIE7の条件付きコメントを追加します

于 2009-01-25T04:38:46.403 に答える