在IE中使用后面元素使用的空元素的背景

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

题

在IE6中，空段落后的段落显示空段落的背景颜色，我猜是错的！它在Firefox中正常工作，但我没有检查过IE7。

是否有解决此问题的CSS解决方案，还是我必须删除空元素？

（我宁愿不必删除空元素，因为这涉及编写代码以在输出之前检查每个元素是否为空）

使用严格或过渡性文档类型（添加此注释以回答答案）

时，行为保持不变

有趣的是，文本颜色不会产生效果，只有背景颜色。

<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对于让浏览器正确解释您的代码至关重要，没有一个您将陷入怪癖模式。

但无论如何，这个bug最简单的解决方法就是为你当前的无格式元素设置一个背景。

其他提示

我刚刚在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>

你应该看到红色段落从左边开始是50像素。

为什么它正在做这个是任何人的猜测。添加一些代码来检查段落是否为空并不太难，加上它会从输出中删除无用的标记并完全避免这个问题。放手一搏？

尝试在空段落中添加不间断的空格...... 

<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将形式怪异切换到标准模式。这带来了许多其他的优点，比如正确的盒子模型，所以无论如何你都应该这样做。

我发现一个奇怪的解决方法是添加位置：相对于可能为空的段落，如下所示：

<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top