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
更多示例 - 结束示例]

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

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

我应该从违反这样的CSS盒子模型中遇到什么样的问题，如何减轻这些问题呢？

Answer 1

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

规范中的描述非常详细，所以我不会在这里引用它，但基本上会发生的事情是<div>元素的内联部分（包括<my-element>）被重定位到匿名块中<pre>块框周围的框。 <my-example>元素之前的“Some text”位包含在其自己的匿名内联框中，而<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>元素仍然只是一个元素。

显示时出错：内联自定义元素包含display：block元素？

1 个答案: