DETAILS 요소를 통해 상자 크기가 상속되지 않습니까?

Question

상자 크기를 상속하는 일반적인 기술을 사용하면 DETAILS 요소에 올바른 값이 있더라도 해당 값은 DETAILS 요소의 하위 항목에 상속되지 않습니다.

예제 코드 조각에서 DETAILS 요소 외부의 DIV는 상자 크기 조정(예상 및 필수)을 상속하지만 DETAILS 요소 내부의 DIV는 상속하지 않습니다. 확인을 위해 DevTools를 사용할 수 있습니다.

Firefox와 Chrome 모두 이러한 동작을 나타냅니다. 행동이 맞나요?

으아악 으아악

P粉530519234 · Answer

이는 box-sizing 속성이 details 요소 내의 하위 요소에 의해 제대로 상속되지 않는 알려진 문제인 것 같습니다. 일부 소식통에 따르면 이는 일부 브라우저 렌더링 엔진의 버그로 인한 것입니다. 이 문제를 해결하려면 다음 코드를 추가하여 details 요소 내부 요소의 box-sizing 속성을 명시적으로 설정할 수 있습니다.

으아아아 으아아아

P粉217629009 · Answer

일반적으로 Chrome과 Firefox가 동일한 놀라운 동작을 보인다면 그것이 옳다고 말하는 것이 꽤 안전합니다.

이것도 예외는 아닙니다. HTML5 표준 표현:

따라서 슬롯은 실제로 스타일이 있는 요소이고, 세부 요소의 하위 요소는 세부 요소의 스타일이 아닌 해당 스타일을 상속합니다. 그리고 *、*::after、*::before不会匹配slot，所以div继承的是box-sizing的初始值，即content-box 때문에.