将 <ul></ul> 嵌套在 中会创建两个段落。为什么？ [复制]答案

【问题标题】：Nesting a <ul></ul> within a creates two paragraphs. Why? [duplicate]将 <ul></ul> 嵌套在 中会创建两个段落。为什么？ [复制]
【发布时间】：2015-03-24 15:04:33
【问题描述】：

我注意到浏览器在解释以下代码时出现了一种奇怪的行为：

  <h2>Maecenas aliquet lorem id urna vehicula</h2>
  <p>&nbsp;
    <ul class="liststyle">
      <li>Curabitur</li>
      <li>Pharetra</li>
      <li>Convallis</li>
    </ul>
  </p>

当我尝试赋予它某种风格时，我尝试了以下选择器：

p li {
  font-family: Verdana, sans-serif;
  font-size: 14px;
}

我知道更好的选择是“ul li”，但我的选择器 (p li) 应该可以工作，但它不能，因此查看 Chrome 和 Firefox 中的开发人员工具，这是他们解释代码的方式：

<p>
</p>
<ul class="liststyle">
    <li>Curabitur</li>
    <li>Pharetra</li>
    <li>Convallis</li>
</ul>
<p></p>

唯一的区别是 Chrome 还显示了我放置在那里试图解决问题的实体 ( )，但仍会创建两个段落。我正在寻找对这种现象的解释。谢谢。

【问题讨论】：

没有理由在段落标签中包含ul。
您的答案可以在这里找到：stackoverflow.com/questions/7168723/…
stackoverflow.com/questions/10601345/…

标签： html css

【解决方案1】：

段落不能包含块级元素。一些浏览器显然认为您犯了一个错误并尝试纠正它。

Read more

【讨论】：

可能是因为 元素的结束标签是可选的；因此，当浏览器遇到不应包含在  中的元素时，它会自动关闭该段落。至于第二段，这似乎是更神秘的部分，但似乎是对遇到关闭  而没有对应的  的补偿。
不是某些浏览器，但所有浏览器都必须处理无效的 html 代码才能解析它。他们这样做的方式没有严格定义，称为browser error tolerance。

【解决方案2】：

您的问题是，根据网络标准， 标签内不应包含块元素。

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

【讨论】：