내 `display: table-cell` 하위가 Internet Explorer에서 `height: 100%`를 무시하는 이유는 무엇입니까?

IE 디스플레이: table-cell 하위 높이 무시: 100%

문제:

CSS를 사용하여 테이블 레이아웃을 동적으로 생성하는 동안 display: table-cell이 포함된 div는 높이를 무시합니다. Internet Explorer 8 이상 버전에서는 100% 속성입니다.

답변:

면책조항: 이 문제는 명확한 설명이 없기 때문에 발생합니다. 디스플레이: 테이블 행 및 디스플레이: 테이블 셀의 높이 백분율 지정 요소.

안타깝게도 W3C 사양에서는 이러한 요소에서 높이 백분율을 해석하는 방법을 정의하지 않으며 이를 브라우저 구현에 맡깁니다. 결과적으로 Internet Explorer 버전 8~11을 포함한 일부 브라우저는 표 레이아웃의 백분율 높이를 일관되지 않게 처리할 수 있습니다.

가능한 해결 방법:

• 백분율 높이 피하기: 테이블에 고정 또는 절대 높이를 사용하세요. 셀.
• 다른 테이블 레이아웃 방법 사용: IE에서 이 문제를 방지하려면 CSS Grid, Flexbox 또는 둘의 조합을 사용하는 것이 좋습니다.
• 사용 JavaScript: JavaScript를 사용하여 표 셀의 높이를 동적으로 설정합니다.
• CSS 전처리기: Sass 또는 Less와 같은 CSS 전처리기를 활용하여 테이블 셀 높이에 대한 픽셀 값을 계산하고 지정합니다.

참고:

Internet Explorer 8 및 이후 버전을 지원해야 하는 경우 순수 CSS 솔루션이 실행 가능하지 않을 수 있다는 점을 기억하는 것이 중요합니다. 브라우저.

위 내용은 내 `display: table-cell` 하위가 Internet Explorer에서 `height: 100%`를 무시하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!