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>

Stange PRE标记（或缺少）行为

1 个答案: