Chrome과 Firefox가 블록 요소 높이를 다르게 렌더링하는 이유는 무엇입니까?

Chrome과 Firefox에서 높이가 다르게 렌더링됨

부모의 높이 속성을 명시적으로 지정하지 않고 블록 수준 요소의 높이를 자동 또는 0~100%로 설정할 경우, Chrome에서 계산된 높이는 Firefox와 다를 수 있으며, 특히 요소에 아래쪽 여백이 있는 경우 더욱 그렇습니다.

왜 차이점이 있나요?

W3C CSS2.1 사양에는 포함 블록의 높이가 명시적으로 지정되지 않은 경우 height: 1%가 자동으로 계산되어야 한다고 명시되어 있습니다. 그러나 Chrome은 하위 요소에서 작동하는 백분율 높이에 대해 상위 요소에 설정된 높이 속성을 요구하는 보다 전통적인 해석을 고수합니다.

반면에 Firefox와 IE는 최근 flex를 허용하도록 해석을 확장했습니다. 백분율 높이에 대한 참조로서의 높이. 전통적인 해석과의 차이로 인해 브라우저의 렌더링 차이가 발생했습니다.

대체 솔루션

Chrome과 Firefox 모두에서 원하는 동작을 달성하려면 다음 대안을 고려하세요.

• 디스플레이 적용: 부모에 flex를 적용하여 align-items를 설정합니다. 자식을 늘리고 부모의 전체 크기로 확장합니다. height.
• 위치 사용: 상위 항목에 대한 상대 위치: 절대; 높이: 100%; 너비: 하위에 100%. 이 방법은 Chrome의 백분율 높이 문제를 무시합니다.

위 내용은 Chrome과 Firefox가 블록 요소 높이를 다르게 렌더링하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!