IEの次の要素で使用される空の要素の背景

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

質問

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

この問題のCSSソリューションはありますか、空の要素を削除する必要がありますか？

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

strictまたはtransitionのいずれかの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>
役に立ちましたか？

解決

空の段落は無意味です-これは、おそらく間違ったHTMLを書いていることを意味します。

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

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

他のヒント

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に入っていることがわかります。

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

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

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

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

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

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

これにより、IE6はフォームの動作を標準モードに強制的に変更します。これにより、正しいボックスモデルのような多くの利点がもたらされるため、とにかくそれを行う必要があります。

私が見つけた奇妙な回避策の1つは、次のように潜在的に空の段落にposition：relativeを追加することでした：

<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top