css - 出现:inline custom element contains display:block elements?时出现什么问题

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 text [ Example: Introduction

Some code here

More example — end example ]

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

样式 <my-example>作为display:block强制它从一个新行开始，这与 PDF 不一致我需要模仿。

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

Answer 1

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

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

虽然内联框包含 block 级框可能没有多大意义——毕竟，规范确实说为了渲染的目的将它分解成一堆匿名框——这样的行为案例定义非常明确，因此(或者至少应该)跨浏览器可靠。除了模糊的浏览器错误之外，你不应该遇到任何问题，我目前还没有发现这些错误，尽管 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>元素实际上并不是那样拆分的——此图中的开始和结束标记界定了生成的框，而不是元素本身。在影子 DOM 方面，<pre>元素仍被视为 <my-example> 的子元素元素，以及整个 <my-example>元素仍然只是一个元素。