Question

我注意到浏览器如何解释以下代码的奇怪行为：

  <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还会显示我尝试解决问题的实体（＆amp; nbsp;），但仍会创建两个段落。我正在寻找这种现象的解释。感谢。

Answer 1

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

<强> Read more

Answer 2

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

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

在<p> </p>中嵌套<ul> </ul>会创建两个段落。为什么？

2 个答案: