Chrome과 Firefox가 백분율 및 '자동' 값에 대해 높이를 다르게 렌더링하는 이유는 무엇입니까?

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

CSS에서 상위 요소의 높이를 지정하지 않고 블록 수준 요소의 높이를 백분율 또는 "자동"으로 설정 브라우저에 따라 높이 계산이 달라질 수 있습니다. 예를 들어 Chrome과 Firefox는 서로 다른 동작을 나타냅니다.

"height: 1%"가 자동으로 계산되는 이유

height: 1%의 예에서 Chrome은 div의 높이를 다음과 같이 계산합니다. 여백 하단에 p 요소의 콘텐츠 높이를 더한 값입니다. 이는 CSS 사양에 따라 상위 요소의 높이가 명시적으로 설정되지 않고 요소의 위치가 절대적으로 지정되지 않은 경우 "auto"가 백분율로 계산되기 때문입니다.

부모의 Flex 높이

다른 하나 Chrome과 Firefox의 차이점은 Flexbox에서 백분율 높이를 처리하는 것입니다. Chrome과 Safari는 부모의 플렉스 높이를 우선시하는 반면, Firefox와 IE11/Edge는 부모의 전체 높이를 우선시합니다.

브라우저 해석

키 백분율에 관한 CSS 사양의 언어는 다소 모호하여 해석의 여지가 있습니다. 브라우저 제작자에 의해. 전통적인 해석에서는 상위 요소에 설정된 높이 값이 필요하며 그 뒤에는 Chrome 및 Safari와 같은 브라우저가 따릅니다. 그러나 Firefox와 IE는 플렉스 높이를 포함하도록 이 해석을 확장했습니다.

대체 솔루션

브라우저 전반에 걸쳐 일관된 높이 렌더링을 보장하려면 다음 대안을 고려하십시오.

• 사용 디스플레이: 부모를 구부리고 항목 정렬: 자식을 늘려 자식의 높이를 전체 부모로 설정 height.
• 위치: 절대값을 하위 항목에 높이: 100% 및 너비: 100%로 적용하고 위치: 상위 항목에 상대값을 설정합니다.

위 내용은 Chrome과 Firefox가 백분율 및 '자동' 값에 대해 높이를 다르게 렌더링하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!