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

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

質問

これは、私が開発しているページの概要です。

<?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：

* {
  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%;
}

Firefox 3では、IE7がページを完全にレンダリングする間、body div（背景が緑色）はほとんど何も押しつぶされません。 CSS 2.1標準について（MeyerのO'Reillyの本を介して）話せることから、浮動divはコンテナーブロック内で浮動するはずですが、Firefox 3では明らかにそうではありません。

では、Firefoxのレンダリングが準拠している場合、何が欠けていますか？

役に立ちましたか？

解決

問題は、IE7がフローティングチャイルドを含むように親要素をクリアすることです。これはレンダリング方法ではありません。他のポスターによるより良い説明。

単純な修正： overflow：hidden; を #body に適用：

#body {
    overflow: hidden;
}

この投稿をご覧ください説明。

他のヒント

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

body divには高さを指定しないでください。フローティング要素のみが含まれているため、高さを与える要素は何もありません。フローティング要素は、その親のサイズには影響しません。 IEはこれを行い、要素を展開してその子を含めます。これは、IEのよく知られたレンダリングエラーの1つです。

コードからxmlタグを削除します。 Doctypeはページの最初に来る必要があります。そうでない場合、IEはそれを無視します。

IE 8ベータでページを表示すると、Firefoxとまったく同じようにページがレンダリングされます。

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

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

ご回答いただきありがとうございます。

同様に私の問題を解決する別の解決策があります：親divのフローティング（id =＆quot; body＆quot;）。これはマイヤーの本から直接来ているので、どうやって見逃したのかわかりません。学習のもう1つのケースは学習です！もう1つは、これにより、私が述べていない別の問題も解決することです。つまり、本文とフッターの間に余白をどのように合わせるのですか。 Firefoxでは、フッターをクリアすると、本文とフッターの間にスペースを空けるためのマージンを使用できなくなります。ただし、親要素はフローティングします。

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