IE가 테이블 요소에서 '높이: 100%'를 무시하는 이유는 무엇입니까?

IE가 테이블 요소의 높이: 100%를 무시하는 이유

문제

디스플레이: 테이블, 디스플레이: 테이블 행과 함께 CSS 테이블 레이아웃을 사용할 때 및 디스플레이: table-cell, 100%로 설정된 하위 요소의 높이가 IE에서 무시됩니다.

설명

안타깝게도 CSS 테이블 레이아웃 사양에는 하위 요소의 백분율 높이를 처리하는 방법이 명확하지 않습니다. 결과적으로 브라우저는 이 동작을 다르게 구현했습니다. IE에서는 표 셀의 백분율 높이가 인식되지 않습니다.

영향

이러한 불일치로 인해 질문에서 볼 수 있듯이 표 셀 내부의 내용이 맞지 않는 예기치 않은 결과가 발생할 수 있습니다. IE에서는 예상됩니다.

솔루션

순수한 CSS 해결 방법은 상호 운용성 문제가 있는 경우 대체 접근 방식을 고려해야 합니다.

• JavaScript 사용: JavaScript를 사용하여 하위 요소의 높이를 동적으로 설정합니다.
• 고정 사용 높이: 올바른 높이를 보장하기 위해 상위 테이블과 하위 요소의 고정 높이를 지정합니다.
• CSS 테이블 레이아웃 방지: Flexbox 또는 CSS 그리드와 같은 대체 레이아웃 기술 사용을 고려해보세요.

위 내용은 IE가 테이블 요소에서 '높이: 100%'를 무시하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!