html - Stange PRE 标签(或缺少标签)行为

Question

给定这个 HTML

<pre>
<div class="px_xml">&lt;AddFileDialogPlaces id="<b>RVT_2016 Places</b>" delete_prior="true"&gt;
   <div class="px_ind">&lt;Place id="Favorites"&gt;C:\Users\[Px~User]\Links&lt;/Place&gt;
   &lt;Place id="Datasets"&gt;C:\ProgramData\Datasets&lt;/Place&gt;
      <div class="px_ind">&lt;Place id="Families"&gt;C:\ProgramData\Assets\Revit\2016\Libraries&lt;/Place&gt;</div>
   &lt;Place id="Desktop"&gt;Desktop&lt;/Place&gt;
   &lt;Place id="My Computer">::{20D04FE0-3AEA-1069-A2D8-08002B30309D}&lt;/Place&gt;
   &lt;Place id="My Network Places"&gt;::{208D2C60-3AEA-1069-A2D7-08002B30309D}&lt;/Place&gt;
   &lt;Place id="Documents"&gt;Personal&lt;/Place&gt;
   &lt;Delete&gt;Revit Server Network View&lt;/Delete&gt;</div>
&lt;/AddFileDialogPlaces&gt;</div>
</pre>

自定义 CSS 中的这个

.px_xml {
       font-family: monospace;
       font-size: .7em;
       color: #0000CC;
       margin-bottom:0;
       display: block;
}

.px_ind {
       margin-left: 2em;
       display: inline-block;
}

一切都按预期进行。但是，如果我删除 Pre 标签，因为我使用 CSS 设置等宽字体，这看起来无关紧要，那么颜色覆盖仅适用于第二个 DIV。

现在我知道我可以保留 Pre 并跳过 .px_ind 样式，但我不想这样做有两个原因。第一，它迫使我以困难的方式正确设置所有缩进，第二，它让我以后修改缩进量变得不容易。我宁愿在 XML 中保留一些空间只是为了帮助我在编辑时理解，同时允许样式真正驱动最终表达，但这不需要 Pre。大多数情况下，这对于 Pre 标签所做或不做的事情来说似乎是一件奇怪的事情，所以我想了解它。

编辑:显示行为的图像。

和原位的 HTML

Answer 1

pre 用于保存短语内容，div 不是允许的内容之一。浏览器尽可能处理语法错误。

https://www.w3.org/TR/html5/grouping-content.html#the-pre-element

您使用的浏览器可能会将此错误解释为您错过了 div 和 pre 并且忘记关闭其中之一或两者。 .pix_ind 位于 .px_xml 之后，而不是在其中，CSS 不再被继承。

---

您可以做的是删除 pre 标签并使用 CSS white-space:pre; 代替。

.px_xml {
  white-space: pre;
  /* here you pre tag is no longer needed */
  font-family: monospace;
  font-size: .7em;
  color: #0000CC;
  margin-bottom: 0;
  display: block;
}
.px_ind {
  margin-left: 2em;
  display: inline-block;
}

<div class="px_xml">&lt;AddFileDialogPlaces id="<b>RVT_2016 Places</b>" delete_prior="true"&gt;
   <div class="px_ind">&lt;Place id="Favorites"&gt;C:\Users\[Px~User]\Links&lt;/Place&gt;
   &lt;Place id="Datasets"&gt;C:\ProgramData\Datasets&lt;/Place&gt;
      <div class="px_ind">&lt;Place id="Families"&gt;C:\ProgramData\Assets\Revit\2016\Libraries&lt;/Place&gt;</div>
   &lt;Place id="Desktop"&gt;Desktop&lt;/Place&gt;
   &lt;Place id="My Computer">::{20D04FE0-3AEA-1069-A2D8-08002B30309D}&lt;/Place&gt;
   &lt;Place id="My Network Places"&gt;::{208D2C60-3AEA-1069-A2D7-08002B30309D}&lt;/Place&gt;
   &lt;Place id="Documents"&gt;Personal&lt;/Place&gt;
   &lt;Delete&gt;Revit Server Network View&lt;/Delete&gt;</div>
&lt;/AddFileDialogPlaces&gt;</div>

---

显示浏览器以某种方式修复 HTML 的典型示例:当您构建表格时，如果缺少 tbody，浏览器会添加它，甚至可以用作您的选择器样式表。

tbody td {
  border: solid;
  padding:1em;
}

<table>
  <tr>
    <td>Is <code>tbody</code> really missing ?</td>
  </tr>
</table>