IE7とFirefox 3のレンダリングの違い
-
03-07-2019 - |
質問
これは、私が開発しているページの概要です。
<?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では、フッターをクリアすると、本文とフッターの間にスペースを空けるためのマージンを使用できなくなります。ただし、親要素はフローティングします。