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

Question

我正在构建一个自定义元素来标记示例（在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

更多示例-结束示例]

但是，因为它使

样式

像这样违反CSS-box模型会产生什么样的问题，我该如何缓解这些问题？




Answer 1

第9.2节对此进行了规定。CSS2的第1.1条。1个规范，描述匿名块框。

规范中的描述非常详细，所以我不会在这里引用，但基本上发生的是

虽然内联框包含块级框可能没有多大意义——毕竟，规范确实说为了呈现的目的将其分解成一堆匿名框——但这种情况下的行为定义非常明确，因此（或至少应该）跨浏览器是可靠的。除了晦涩难懂的浏览器bug之外，你不应该遇到任何问题，我目前还不知道这些bug，尽管Chrome在包含块框的a元素中表现得非常怪异。

下面是一个例子：

<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>

当然要注意，