Chrome과 Firefox가 블록 수준 요소에서 백분율 높이를 다르게 렌더링하는 이유는 무엇입니까?

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

질문:

블록 수준 요소의 높이를 백분율로 설정할 때 (예: 1%) 부모의 높이를 명시적으로 설정하지 않은 경우 Chrome과 Firefox가 높이를 다르게 계산하는 이유는 무엇입니까? Chrome에서는 하위 여백을 고려하고 Firefox에서는 그렇지 않습니까?

답변:

CSS 표준에 따르면 포함 블록의 높이가 명시적으로 지정되지 않은 경우 백분율 높이가 다음과 같이 계산됩니다.

그러나 다양한 브라우저에서 이 조항을 구현했습니다. 다르게:

• 웹킷 브라우저(Chrome, Safari)는 전통적인 해석을 따르며, 유입되는 하위 항목에 대해 작업하려면 부모가 백분율 높이에 대한 높이를 설정해야 합니다.
• Firefox와 IE는 flex height를 다음과 같이 허용하도록 해석을 넓혔습니다. 글쎄요.

사양과의 이러한 차이로 인해 일부 브라우저에서는 플렉스 높이를 사용하고 다른 브라우저에서는 상위 높이 설정이 필요한 등 렌더링 불일치가 발생했습니다.

대체 솔루션:

모든 브라우저에서 일관된 렌더링을 보장하려면 다음 중 하나를 사용하는 것이 좋습니다. 대안:

• 부모 디스플레이를 "flex"로 설정 align-items: Stretch를 사용하여 어린이의 전체 높이를 자동으로 활성화합니다.
• 위치 사용 : 절대 및 위치: 상대는 각각 상위 요소와 하위 요소에 있으며 하위 요소는 height: 100%; 너비: 100%. 이를 통해 지정된 상위 높이가 없어도 하위 요소에 백분율 높이가 작동할 수 있습니다.

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