当 display:inline 自定义元素包含 display:block 元素时会出现什么问题？答案

【问题标题】：What goes wrong when a display:inline custom element contains display:block elements?当 display:inline 自定义元素包含 display:block 元素时会出现什么问题？
【发布时间】：2014-03-10 00:42:27
【问题描述】：

我正在构建一个自定义元素来标记示例（在http://jsbin.com/kiboxuca/1/edit 使用它）：

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.0/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.0/polymer.js"></script>
<polymer-element name="my-example" noscript>
  <template>
    <style>
      :host { display: inline }
    </style>
    [ <em>Example:</em>
    <content></content>
    — <em>end example</em> ]
  </template>
</polymer-element>
<div>
  Some text <my-example>Introduction
  <pre>Some code here</pre>
  More example</my-example>
</div>

这会产生我想要的外观：

一些文字[例子：介绍
Some code here
更多示例 - 结束示例 ]

但是，因为它使<my-example> 元素display:inline 我担心块级<pre> 元素会导致问题。

将<my-example> 设置为display:block 会强制它从新行开始，这与我需要模仿的PDF 不一致。

像这样违反 CSS 盒子模型会出现什么样的问题，我该如何缓解这些问题？

【问题讨论】：

一个已知问题是 <p> 元素在 <pre> 之前自动关闭，但这是 HTML 解析器的问题，而不是 CSS 框模型的问题，我可以通过替换<pre> 带有一个新的自定义元素来包装它。
默认元素是display: inline，所以你可以放弃<style>。 <p> 关闭很烦人。我不得不将内容更改为 <div> 以获取 PDF 中的一些示例：jsbin.com/xapevika/2/edit
如果您想要内联渲染但能够包含块级元素的内容，请尝试display: inline-block。
@ScottMiles，不幸的是，inline-block 使示例呈现为“Some text”开头的行内的单个框：jsbin.com/kiboxuca/4/edit

标签： css polymer shadow-dom

【解决方案1】：

这是在section 9.2.1.1 of the CSS2.1 spec 中指定的，它描述了匿名块框。

规范中的描述非常冗长，所以我不会在这里引用它，但基本上发生的情况是你的<div> 元素的内联部分，包括<my-element>，被重新定位到围绕@ 的匿名块框中987654325@ 方块框。 <my-example> 元素之前的“一些文本”位包含在它自己的匿名行内框中，而<my-example> 元素像往常一样生成自己的行内框，只是它被拆分为周围生成的匿名块框<pre> 框。

虽然内联框包含块级框可能没有多大意义——毕竟，规范确实规定为了渲染的目的将其分解为一堆匿名框——但在这种情况下的行为case 的定义非常明确，因此（或至少应该）跨浏览器是可靠的。除了晦涩的浏览器错误之外，您不应该遇到任何问题，尽管Chrome has been known to act downright weird with a elements containing block boxes，我目前还没有发现这些错误。

这是一个插图：

<polymer-element name="my-example" noscript>
  <!-- ... -->
</polymer-element>
<div>

  <anonymous-block>
    <anonymous-inline>Some text </anonymous-inline>
    <my-example>
      [ <em>Example:</em>
      Introduction
    </my-example>
  </anonymous-block>

  <pre>Some code here</pre>

  <anonymous-block>
    <my-example>
      More example
      — <em>end example</em> ]
    </my-example>
  </anonymous-block>

</div>

当然请注意，<my-example> 元素实际上并没有像那样拆分——本插图中的开始和结束标签界定了生成的框，而不是元素本身。在 shadow DOM 方面，<pre> 元素仍然被认为是 <my-example> 元素的子元素，整个 <my-example> 元素仍然只是一个元素。

【讨论】：