상자 크기를 상속하는 일반적인 기술을 사용하면 DETAILS 요소에 올바른 값이 있더라도 해당 값은 DETAILS 요소의 하위 항목에 상속되지 않습니다.
예제 코드 조각에서 DETAILS 요소 외부의 DIV는 상자 크기 조정(예상 및 필수)을 상속하지만 DETAILS 요소 내부의 DIV는 상속하지 않습니다. 확인을 위해 DevTools를 사용할 수 있습니다.
Firefox와 Chrome 모두 이러한 동작을 나타냅니다. 행동이 맞나요?
으아악 으아악
P粉5305192342024-02-22 12:38:39
이는 box-sizing 속성이 details 요소 내의 하위 요소에 의해 제대로 상속되지 않는 알려진 문제인 것 같습니다. 일부 소식통에 따르면 이는 일부 브라우저 렌더링 엔진의 버그로 인한 것입니다. 이 문제를 해결하려면 다음 코드를 추가하여 details 요소 내부 요소의 box-sizing 속성을 명시적으로 설정할 수 있습니다.
P粉2176290092024-02-22 00:16:05
일반적으로 Chrome과 Firefox가 동일한 놀라운 동작을 보인다면 그것이 옳다고 말하는 것이 꽤 안전합니다.
이것도 예외는 아닙니다. HTML5 표준 표현:< /p>
따라서 슬롯은 실제로 스타일이 있는 요소이고, 세부 요소의 하위 요소는 세부 요소의 스타일이 아닌 해당 스타일을 상속합니다. 그리고 *、*::after、*::before不会匹配slot，所以div继承的是box-sizing的初始值，即content-box 때문에.