IE가 테이블 셀 하위 요소에 대해 '높이: 100%'를 존중하지 않는 이유는 무엇입니까?

IE에서 표 셀 하위 요소의 높이: 100%를 무시합니다

IE8 이상에서 CSS 표를 사용하여 동적으로 표를 구성할 때 문제가 발생합니다. . 관련 디스플레이 속성에 대한 완전한 지원을 주장하는 사양에도 불구하고 IE는 테이블 셀("Elem") 내의 하위 요소("Content")에 대해 설정된 height: 100%를 무시하고 예기치 않게 동작합니다. 이로 인해 하위 요소의 높이가 잘리는 왜곡된 표시가 발생합니다.

기본 원인:

이러한 불일치의 원인은 CSS 사양 자체에 있습니다. 사양에서는 디스플레이: 테이블 행 및 디스플레이: 테이블 셀 요소의 높이에 대한 백분율 값의 효과를 정의되지 않은 상태로 둡니다. 이는 CSS 테이블의 브라우저 구현이 백분율 높이와 관련하여 다양한 동작을 갖는다는 것을 의미합니다.

해결 방법:

브라우저 구현의 가변성을 고려하여 브라우저 간 CSS 전용 CSS를 찾습니다. 해결이 불가능할 수도 있습니다. 그러나 고려해야 할 몇 가지 대체 접근 방식이 있습니다.

• JavaScript 해결 방법: JavaScript를 사용하여 상위 테이블의 높이를 기반으로 하위 요소의 높이를 동적으로 계산하고 설정합니다.
• 테이블 없는 솔루션: CSS 테이블을 사용하지 말고 대신 Flexbox나 Grid와 같은 다른 방법을 사용하여 레이아웃을 구현하세요. 레이아웃.
• 고정 높이: 하위 요소에 대한 특정 고정 높이를 설정하여 테이블 셀 내에 맞는지 확인합니다.

브라우저 비호환성:

이 문제는 IE의 모든 버전에 영향을 미친다는 점에 유의하는 것이 중요합니다. 11. 따라서 IE 관련 CSS 해킹에 의존하면 모든 IE 버전에서 문제가 해결되지 않을 수 있습니다.

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