0

Web ページが IE で期待どおりに表示されます。Firefox に入ると、重要な div が間違った場所にレンダリングされ、レイアウトが崩れます。私が言えることは、Firefox は間違っているということです。Firefox で div を正しい場所にレンダリングするにはどうすればよいですか?

3 つの div の周りに境界線を付けて、それらがレンダリングされている場所を簡単に確認できるようにしました。紫色のものは FF では正しくないが、IE では正しいものです。

編集

JSFiddle: http://jsfiddle.net/PYy6t/1/

JSFiddle は両方のブラウザーで同じように (そして FF と同じ方法で) コードをレンダリングしますが、実際にページを実行すると、IE10 は私のスクリーンショットが示すように、私が望むようにコードをレンダリングします。

私のコード:

<div style="float: left; clear: both; width: 100%;">
        <asp:Label ID="Label1" runat="server" CssClass="hdr" Text="New Grade Entry" Font-Bold="true" />
    </div>
    <div style="width: 100%; float: left; clear: both;">
        <hr />
        <br />
    </div>
    <asp:UpdatePanel ID="upnlNewGrade" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div id="divTop" class="Option" style="width: 100%; position:relative; border-color:purple; border-style: solid;
                border-width: 1px;">
                &nbsp
                <div class="OptionLabel" style="width: 50%; height:inherit; border-color:green; border-style:solid; border-width:1px; ">
                    //details removed
                <div class="OptionSelect" style="width: 45%; min-height:10px; border-color:red; border-style: solid; border-width: 1px;">
                    //details removed
                &nbsp
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <div class="Blank" style="width:100%">
        &nbsp
    </div>
    <hr style="width: 100%;" />

Firefox のレンダリング: FirefoxPic

IE レンダリング: IEPic

ご覧のとおり、どちらも幅全体を使用する必要があるにもかかわらず、FF はヘッダー テキストとトップ hr の上から div を開始しています。これにより、2 時間が紫色のパネルの下ではなく、赤枠のパネルの下 (ページのさらに下にあるはずのラベルと共に) にレンダリングされます。私は何が欠けていますか？

4

3 に答える 3

1

あなたの問題は clearfix 問題として知られています。これは FF だけでなく、Webkit ブラウザー (サファリとクロム) でも発生しています。あなたが期待していると述べたように、IEだけがそれを処理するとさえ思います。

この問題は、親 div コンテナーがあり、その中にすべての子が浮かんでいる場合にのみ発生します。より良い説明については、「clearfix」をグーグルで検索することをお勧めします。

@Kev が述べた解決策は実際に機能しますが、DOM に余分な要素を追加する必要があります。これはスタイリングにのみ使用され、悪い習慣と見なされます。ある種の .clearfix クラスを使用することをお勧めします。私は通常、twitter ブートストラップのものを使用します。

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

#divTopコンテナに適用するだけで問題ありません。それがどのように、そしてなぜ機能するかについての説明は、ここにあります: http://nicolasgallagher.com/micro-clearfix-hack/

于 2013-04-03T21:18:51.563 に答える