3

我正在构建一个自定义元素来标记示例（在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 盒子模型应该会出现什么样的问题，我该如何缓解这些问题？

4

1 回答 1

1

这在 CSS2.1 规范的第 9.2.1.1 节中指定，它描述了匿名块框。

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

虽然内联框包含块级框可能没有多大意义——毕竟，规范确实说为了渲染的目的将它分成一堆匿名框——这种情况下的行为非常定义明确，因此（或至少应该）跨浏览器可靠。除了晦涩的浏览器错误之外，您不应该遇到任何问题，我目前还没有发现这些错误，尽管众所周知，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>

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

于 2014-06-02T17:25:44.140 回答