当子内联块

Question

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

考虑以下两个div元素：

＆＃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">
    <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的元素检查员添加了一张描述这个图片的图片：

两个示例之间的唯一区别是，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。所以我需要第二个例子的代码来给出第一个例子的结果。

Answer 1

强制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;