当子内联块

时间:2017-05-10 10:48:05

标签: html css

我的代码中有自定义元素,当子元素具有display: inline-block样式时会显示一些奇怪的行为。

考虑以下两个div元素:



<div style="padding: 4px;">
  <randomcustomelement style="background-color: yellow">
    <div style="display: block; height: 36px; background-color: red; width: 125px;">
      <div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
    </div>
  </randomcustomelement>
</div>
<div style="padding: 4px;">
  <randomcustomelement style="background-color: yellow">
    <div style="display: inline-block; height: 36px; background-color: red; width: 125px;">
      <div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
    </div>
  </randomcustomelement>
</div>
&#13;
&#13;
&#13;

在第一个主div中,很明显浏览器会忽略自定义元素randomcustomelement。它确实具有适当的宽度和高度,但不会像预期的那样呈现。然而,在第二个主要div中,randomcustomelement确实会被渲染,而且它有一个非常奇怪的17px高度。我在下面通过Chrome的元素检查员添加了一张描述这个图片的图片:

Element inspector results

两个示例之间的唯一区别是,div包裹的子randomcustomelement在第一个示例中为display: block,在第二个示例中为display: inline-block。我已经给randomcustomelement一个明显的黄色,也明显地描绘了它的渲染效果。

所有浏览器都存在此问题,即使它们应该忽略自定义元素:

  

用户代理必须将他们不理解的元素和属性视为语义中立;将它们留在DOM中(对于DOM处理器),并根据CSS(对于CSS处理器)设置它们的样式,但不要从它们中推断出任何含义。

https://www.w3.org/TR/html5/infrastructure.html#extensibility-0

这真让我头疼,因为我需要内部div成为display: inline-block。所以我需要第二个例子的代码来给出第一个例子的结果。

1 个答案:

答案 0 :(得分:0)

强制randomcustom元素的样式为显示:inline-block height:0 会产生所需的结果。

&#13;
&#13;
<div style="padding: 4px;">
  <randomcustomelement style="background-color: yellow">
    <div style="display: block; height: 36px; background-color: red; width: 125px;">
      <div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
    </div>
  </randomcustomelement>
</div>
<div style="padding: 4px;">
  <randomcustomelement style="background-color: yellow;height:0;display:inline-block">
    <div style="display: inline-block; height: 36px; background-color: red; width: 125px;">
      <div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
    </div>
  </randomcustomelement>
</div>
&#13;
&#13;
&#13;