0

IE6 では、空の段落に続く段落が空の段落の背景色で表示されますが、これは間違っていると思います! Firefox では正常に動作しますが、IE7 は確認していません。

この問題に対する CSS ソリューションはありますか、それとも空の要素を削除する必要がありますか?

（空の要素を削除する必要はありません。出力する前にすべての要素が空かどうかをチェックするコードを書く必要があるためです）

厳密なまたは移行的なDoctypeを使用しても、動作は変更されません（回答に応じてこのコメントを追加しました）

興味深いことに、この効果はテキストの色では発生せず、背景色のみで発生します。

<html>
<head>
</head>
<body>

  <p style='background-color:green'>Green content</p>
  <p style='background-color:red'>Red content</p>
  <p>Unstyled background working because previous red element is not empty</p>

  <p style='background-color:green'>Green content</p>
  <p style='background-color:red'></p>
  <p>Unstyled background broken because previous red element is empty</p>

  <p style='color:green'>Green content</p>
  <p style='color:red'>Red content</p>
  <p>Unstyled text color working because previous red element is not empty</p>

  <p style='color:green'>Green content</p>
  <p style='color:red'></p>
  <p>Unstyled text color working even though previous red element is empty</p>

</body>
</html>
4

5 に答える 5

1

IE7でテストしたところ、そこでも発生することを確認できました。

スタイルが設定されていない段落には実際には赤い背景がないようです。IE7が空の段落の赤いボックスを描画してから、次の段落を上に描画しているだけです。

このコードを試すことで、これを自分で確認できます。

<p style='background-color:green'>Green content</p>
<p style='background-color:red; margin-left:50px'></p>
<p>Unstyled background broken because previous red element is empty</p>

赤い段落が左から50pxであることがわかります。

なぜそれがこれをしているのかは誰の推測でもあります。段落が空になるかどうかを確認するためのコードを追加することはそれほど難しくありません。さらに、出力から不要なマークアップを削除し、この問題を完全に回避します。やってみませんか？

于 2008-11-14T05:53:00.923 に答える
1

空の段落に改行なしのスペースを入れてみてください...

<p style='color:red'>& nbsp;</p>

アンパサンドの後にスペースがないことを除いて...

于 2008-11-14T05:53:13.263 に答える
1

HTML ファイルの先頭に doctype を追加します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

これにより、IE6 は強制的にフォームの癖を標準モードに切り替えることができます。これにより、正しいボックス モデルなど、多くの利点がもたらされるため、とにかく実行する必要があります。

于 2008-11-16T00:33:35.793 に答える
1

空の段落は無意味です。つまり、間違った HTML を書いている可能性があります。

また、あなたの例には DOCTYPE がありません.有効な DOCTYPE は、ブラウザがコードを正しく解釈するために不可欠です。

とにかく、このバグの最も簡単な回避策は、現在スタイル設定されていない要素の背景を設定することです。

于 2008-11-16T00:34:32.967 に答える
0

私が見つけた1つの奇妙な回避策は、次のように空の可能性のある段落に position:relative を追加することでした:

<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>
于 2008-11-17T01:06:50.937 に答える