saiz kotak tidak diwarisi melalui elemen DETAILS?

Question

Menggunakan teknik biasa untuk mewarisi saiz kotak, walaupun elemen DETAILS mempunyai nilai yang betul, nilai tersebut tidak akan diwarisi oleh elemen anak elemen DETAILS.

Dalam coretan kod contoh, DIV di luar elemen DETAILS mewarisi saiz kotak (seperti yang dijangka dan diperlukan), tetapi DIV di dalam elemen DETAILS tidak. Anda boleh menggunakan DevTools untuk pengesahan.

Firefox dan Chrome kedua-duanya mempamerkan tingkah laku ini. Adakah tingkah laku itu betul?

*, *::after, *::before { box-sizing: inherit; }
html { box-sizing: border-box; }

<div>Box sizing outside Details?</div>

<details open>
    <summary>Summary</summary>
    <div>Box sizing inside Details?</div>
</details>

Answer 1

Ini nampaknya merupakan isu yang diketahui apabila atribut bersaiz kotak tidak diwarisi dengan betul oleh elemen kanak-kanak dalam elemen details. Menurut beberapa sumber, ini disebabkan oleh pepijat dalam beberapa enjin pemaparan penyemak imbas. Untuk membetulkannya, anda boleh menambah kod berikut untuk menetapkan atribut bersaiz kotak elemen di dalam elemen details secara eksplisit:

details div {
  box-sizing: inherit;
}

Box sizing outside Details?


    
Summary
    
Box sizing inside Details?

Answer 2

Secara umum, agak selamat untuk mengatakan bahawa jika Chrome dan Firefox mempamerkan gelagat mengejutkan yang sama, maka itu betul.

Ini tidak terkecuali. Perwakilan standard HTML5:

Jadi slot sebenarnya adalah elemen yang mempunyai gaya, dan elemen anak elemen perincian mewarisi gaya itu, bukan gaya elemen perincian. Dan kerana *、*::after、*::before不会匹配slot，所以div继承的是box-sizing的初始值，即content-box.