IE11의 일반 흐름에서 절대 위치 Flex 항목이 제거되지 않는 이유는 무엇입니까?

절대적으로 배치된 플렉스 항목은 IE11의 일반 흐름에서 제거할 수 없습니다.

문제:

콘텐츠가 있는 두 개의 div와 배경에 절대 위치가 있는 세 번째 div 이 경우 컨테이너는 가변상자입니다. 이는 Chrome과 Safari 모두에서 잘 작동하지만 Firefox와 IE11은 절대 위치에 있는 div를 고려하여 마치 세 행에 세 개의 div가 있는 것처럼 div 사이의 공간을 분배합니다.

분석:

Firefox는 절대 위치에 있는 세 번째 div를 유입 플렉스 항목으로 취급하고 간격 계산에서 이를 고려합니다. (IE11도 마찬가지입니다. Chrome과 Edge는 이를 무시합니다.)

분명히 이는 현재 Flexbox 사양과 일치하지 않습니다.

4.1. 绝对定位的弹性项

由于它不在流中，一个 flex 容器的绝对定位从属项不会参与 flex 布局。

해결 방법:

• 절대 위치 이동 div

<div class="container">
    <div class="c1">Content 1</div>
    <div class="bg">Background</div>
    <div class="c2">Content 2</div>
</div>

• CSS 그리드 레이아웃 사용

CSS 그리드 레이아웃은 절대 위치 요소를 고려하지 않으므로 이 문제는 해결될 수 있습니다.

참고:

Firefox의 경우 이 문제는 v52에서 해결되었습니다. 그러나 IE11에는 여전히 이 문제가 있습니다.

위 내용은 IE11의 일반 흐름에서 절대 위치 Flex 항목이 제거되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!