디스플레이: 테이블을 사용할 때 IE가 테이블 셀의 높이를 무시하는 이유는 무엇입니까?

IE는 표 셀의 높이를 무시합니다

display: table, display: table-row 및 display: table-cell 속성을 사용하는 경우 테이블을 구성할 때 Internet Explorer(IE8 및 잠재적으로 이후 버전)에서 예기치 않은 문제가 발생합니다. 콘텐츠가 포함된 div에 지정된 높이: 100%는 무시됩니다.

정의되지 않은 사양

이 동작은 CSS 사양의 모호성에서 비롯됩니다. CanIUse에 따르면 IE는 이러한 레이아웃 속성을 완벽하게 지원해야 합니다. 그러나 CSS 2.1에서는 백분율 값을 사용하여 디스플레이: 표-행 및 디스플레이: 표-셀 요소의 높이를 결정하는 방법이 명확하지 않습니다.

크로스 브라우저 지원 과제

이 정의되지 않은 사양으로 인해 브라우저 전반에 걸쳐 구현이 일관되지 않게 되었습니다. 브라우저는 완전한 지원을 주장할 수 있지만 높이 계산에 대한 정확한 동작은 다를 수 있습니다. 이러한 불일치로 인해 브라우저 간 호환성이 어려워집니다.

대체 솔루션

정의되지 않은 사양과 IE의 고유한 해석으로 인해 순수한 CSS 해결 방법이 실행 가능하지 않으므로 대체 솔루션은 반드시 탐구됩니다. JavaScript 기반 접근 방식 또는 고정 높이가 잠재적인 옵션이지만 모든 시나리오에 이상적인 것은 아닙니다.

지원 중단 인식

디스플레이: 테이블- 셀 및 관련 속성은 최신 CSS 사양에서 더 이상 사용되지 않는 것으로 간주되어 보다 다양한 flexbox 및 CSS 그리드 레이아웃으로 대체되었습니다. 이러한 대체 레이아웃은 유사한 기능을 제공하지만 테이블 레이아웃의 한계를 해결하고 높이 및 크기에 대한 더 나은 제어 기능을 제공합니다.

위 내용은 디스플레이: 테이블을 사용할 때 IE가 테이블 셀의 높이를 무시하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!