0

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

您应该看到红色段落距左侧 50 像素。

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

于 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

我发现的一个奇怪的解决方法是添加 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 回答