SLIM h3 内部 p

Question

如果我想将 header 标签 h1..h5 放入 p 中，它会以错误的方式呈现 HTML：

苗条

p
  h3 Header here
  span Just text

预计

<p>
   <h3>Header here</h3>
  <span>Just text</span>
</p>

实际渲染

<p></p>
  <h3>Header here</h3>
  <span>Just text</span>
<p></p>

看起来没什么特别的，但在这种情况下我无法绑定 CSS 样式，因为结构以损坏的方式呈现。

这是一个错误吗？或者我可以通过某种方式解决这个问题？

Answer 1

您不能在 p 标签内定义 h3 和 span 等标签。有关详细信息，请参阅 HTML5 specification。

Answer 2

Slim 本身不关心标签，并按照您的预期呈现您的代码：

$ slimrb
p
  h3 Header here
  span Just text

产生：

<p><h3>Header here</h3><span>Just text</span></p>

与您预期的代码匹配，空格除外。

虽然这是无效的 HTML，因此当浏览器解析它时，它会将其更正为有效的内容。例如 Chrome 检查器将显示：

<p></p>
<h3>Header here</h3>
<span>Just text</span>
<p></p>

浏览器在下一个 h3 元素之前关闭了 p 元素。

如果您希望它在浏览器中运行，请确保生成有效 HTML。也许使用 div 而不是 p?

SLIM h3 inside p