私のコードには、子要素がdisplay: inline-blockスタイルのときに奇妙な動作をするカスタム要素があります。カスタム要素randomcustomelementがブラウザによって無視されることは明らかである第一主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>：
は、次の2つのdivの要素を考慮してください。適切な幅と高さを持ちますが、レンダリングされません。しかし、第2のメインのdivでは、randomcustomelementがレンダリングされ、それ以上のものは、非常に奇妙な高さが17pxです。私は、下記のChromeの要素インスペクタを介してこれを描いた画像を含めました：
両方の例の唯一の違いは、randomcustomelementによってラップされている子divは、最初の例ではdisplay: block、およびdisplay: inline-block持っているということです2番目の例。私はrandomcustomelementに黄色の色を与えて、それがレンダリングされることを視覚的に描写しました。
この問題は、彼らがカスタム要素を無視すべきであるにもかかわらず、すべてのブラウザに存在している：
ユーザーエージェントは、要素を治療し、彼らは意味的に中立として理解していないという属性をしなければなりません。それらをDOMプロセッサ（DOMプロセッサ用）に残し、CSS（CSSプロセッサ用）に従ってスタイルを設定しますが、それらの意味を推測しません。
https://www.w3.org/TR/html5/infrastructure.html#extensibility-0
私はdisplay: inline-blockするインナーdivを必要とするので、これは本当に、私に頭痛を与えています。だから、私は最初の例の結果を与えるために2番目の例のコードが必要です。
あなたはブラウザが* *要素を無視してはならないことを意味引用スペック：「DOMでそれらを残す」と「CSSに応じてそれらをスタイリングすると、」ブラウザではないだろうものです要素を無視した場合要素がインラインボックスとしてレンダリングされるので（インラインで表示される）、インラインボックスは通常はブロックボックスを含むことができませんが、インラインブロックを含むことができ、黄色のビットはinline-blockが座っているベースラインhttps://www.w3.org/TR/CSS22/visudet.html#leading – BoltClock
あなたの結果は、インラインブロックにベースラインを持たせたくないことを意味します。その場合、display：inline-block *を使わないでください。これは、要素に背景色を与えた後、背景色があると不平を言うようなものです。 – BoltClock
Ignoreは実際にはブラウザの動作に適切な単語ではありません。また、私はカスタム・エレメントがインライン・ボックスとしてレンダリングされることに気づいていませんでした。なぜなら、私の意見では、これは仕様のthem_ clauseから何の意味も推測していないからです。しかし、それは明らかにそうするので、これは私にいくつかの指針を与えました。あなたはインラインでブロックを使用しているので、要素がインラインブロックとして動作することを明示しました。しかし、なぜブラウザがこれをやってくれるのか、私はまだ混乱しています。 – Kazu