백분율 높이를 사용하는 블록 수준 요소의 높이 계산에서 Chrome과 Firefox가 다른 이유는 무엇입니까?

Chrome 및 Firefox의 Heights 렌더링 차이

문제

블록 수준 요소의 높이를 "auto" 또는 "0~100%로 설정" " 부모의 높이를 명시적으로 지정하지 않으면 Chrome과 Firefox에서 높이 계산이 달라집니다. "높이: 1%"의 경우 Chrome은 하단 여백에 콘텐츠 높이를 더한 값으로 높이를 계산하지만 Firefox는 계산하지 않습니다. 이 동작은 상위 항목의 높이가 명시적으로 설정되지 않은 경우 "높이: 1%"가 "자동"으로 계산되어야 한다고 명시한 CSS 사양에도 불구하고 다릅니다.

원인

W3C에서는 다음에 대한 표준을 제공합니다. 브라우저마다 브라우저 제조업체는 이러한 표준을 다르게 구현할 자유가 있습니다. 이 경우 Chrome과 Firefox는 "높이" 속성을 다르게 해석합니다.

Chrome은 사양에 대한 보다 전통적인 해석을 따르며, 하위 요소에서 백분율 높이가 작동하려면 상위 요소에 높이를 설정해야 합니다. Firefox와 IE는 최근 플렉스 높이도 허용하도록 해석을 확장했습니다.

대체 솔루션

이러한 불일치를 해결하려면 다음 대안 중 하나를 사용하는 것이 좋습니다.

• Display Flex: 상위 항목에 "display: flex"를 설정하면 자동으로 설정됩니다. "align-items: Stretch"를 수행하고 하위 항목을 상위 항목의 전체 높이로 확장합니다.
• 절대 위치 지정: 상위 항목에 '위치: 상대'를 설정하고 '위치: 절대; 높이'를 설정합니다. : 100%; 너비: 100%" 이를 통해 부모의 지정된 높이 없이 백분율 높이를 사용할 수 있습니다.

위 내용은 백분율 높이를 사용하는 블록 수준 요소의 높이 계산에서 Chrome과 Firefox가 다른 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!