IE7とFirefox 3のレンダリングの相違

ここに私が開発しているページの概要があります。IE7とFirefox 3のレンダリングの相違

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <link rel="stylesheet" href="../css/test.css" /> 
    <title>Prosperity Login</title> 
    </head> 
    <body> 
    <div id="banner"> 
    </div> 
    <div id="subbanner"> 
    </div> 
    <div id="body"> 
     <div id="colA"> 
     </div> 
     <div id="colB"> 
     <div id="B1"> 
     </div> 
     <div id="B2"> 
     </div> 
     </div> 
     <div id="colC"> 
     </div> 
     <div id="colD"> 
     </div> 
    </div> 
    <div id="footer"> 
    </div> 
    </body> 
</html>

とCSS：Firefox 3の

* { 
    margin: 0px; 
    padding: 0px; 
} 



div { 
    border: 1px dotted; 
} 

#banner { 
    height: 70px; 
    width: 100%; 
} 

#subbanner { 
    height: 30px; 
    width: 100%; 
} 

#body { 
    background-color: #CCFFCC; 
    width: 80%; 
} 

#colA{ 
    float: left; 
    height: 120px; 
    width: 24%; 
} 

#colB{ 
    float: left; 
    height: 80px; 
    width: 24%; 
} 
#colC{ 
    float: left; 
    height: 120px; 
    width: 24%; 
} 
#colD{ 
    float: left; 
    height: 120px; 
    width: 24%; 
} 

#B1{ 
    float: right; 
    height: 48px; 
    width: 80%; 
} 

#B2{ 
    float: right; 
    height: 28px; 
    width: 80%; 
} 
#footer{ 
    height: 30px; 
    width: 100%; 
}

IE7は完全にページをレンダリングしながら、（緑の背景色）ボディdiv要素はほとんどゼロに押しつぶされます。 CSS 2.1の標準（MeyerのO'Reillyの本を介して）からわかるように、float divはコンテナブロック内に浮いているはずです（Firefox 3ではそうではありません）。

Firefoxのレンダリングが準拠している場合、私は行方不明？

出典

2009-03-01 gvkv

OperaはこれをFirefoxと同様にレンダリングします。 – strager

http://jsbin.com/eyanu – strager

あなたの問題は、IE7が親要素をクリアして浮動小児を含むことです。これはレンダリングする方法ではありません。他のポスターによる説明の改善。

簡単な修正：あなたの#bodyにoverflow: hidden;を適用します。

#body { 
    overflow: hidden; 
}

は、説明のためにthis postを参照してください。

出典

2009-03-01 21:37:45 strager

私は常にoverflow：autoを使いましたが、リンクされた記事では、最後の段落の代わりにoverflow：hiddenを使用する理由が記載されています。リンクありがとう。 –

オーバーフロー：非表示。間違いなくこれを処理するための私の好みの方法です。それはハックでもなく、オーバーフローがうまくいくはずだというCSS2仕様のように振る舞います：「浮動小数点、絶対配置要素、インラインブロック、表セル、表キャプション、および 'オーバーフロー'が '可視'以外の要素その値がビューポートに伝播されたとき）新しいブロック書式設定コンテキストを確立します。 – Wick

Internet ExplorerとFirefoxでページが異なってレンダリングされると、Firefoxはページを正しくレンダリングします。

本文のdivには高さを設定しないでください。それは浮動小数点要素しか含んでいないので、それに何らかの高さを与えるものはありません。フローティング要素は、親のサイズには影響しません。 IEはこの問題を解決し、要素を子要素を含むように展開します。これは、IEのよく知られたレンダリングエラーの1つです。

コードからxmlタグを削除します。 doctypeは最初にページに来なければなりません。そうしないと、IEはそれを無視します。

IE 8ベータ版でページを表示すると、Firefoxと同じようにページが表示されます。

出典

2009-03-01 21:37:14 Guffa

Doctype宣言のヘッドアップに感謝します。 – gvkv

（冗長なとにかく）XML宣言を削除すると+1になります。 IEを混乱させ、それを含める正当な理由はめったにありません。 – bobince

id = "body"のdivに割り当てられている重量やボリュームはありません。 divの内部に配置されたテキストは、ボリュームに与えられ、カラー背景を適切なサイズにレンダリングします。この問題はWebkitベースのブラウザ（Chrome、Safari）でも再生されます。

body divにテキストを配置して重みを付けたり、オーバーフローのスタイルを追加したりします。 id = bodyのdivに移動します。

出典

2009-03-01 21:37:41 ahsteele

はい、これはbody divにダミーのテキストを追加したときに気づいた動作です。 – gvkv

お返事ありがとうございます。

私の問題を解決する別の解決法もあります：親div（id = "body"）を浮かべてください。これはマイヤーの本からまっすぐに来たので、私はそれを見逃したか分からない。やっていることのもう一つの事例は学ぶことです！もう1つは、これは私が述べていない別の問題を解決するということです。私はボディとフッタの間にどのようにマージンを合わせますか？ Firefoxでは、フッターをクリアしても、マージンを使用してボディとフッタの間にスペースを与えることはできません。しかし、親要素をフローティングしています。

出典

2009-03-01 23:32:07 gvkv

IE7とFirefox 3のレンダリングの相違

答えて

関連する問題