我的代码中有自定义元素,当子元素具有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;
在第一个主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
。所以我需要第二个例子的代码来给出第一个例子的结果。
答案 0 :(得分:0)
强制randomcustom元素的样式为显示:inline-block 和 height:0 会产生所需的结果。
<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;