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

절대적으로 배치된 Flex 항목은 IE11에서 일반 흐름으로 유지됩니다.

세 개의 div(두 개는 콘텐츠를 포함하고 하나는 절대적으로 배치됨)가 있는 Flexbox 레이아웃에서 배경이 있는 경우 IE11은 절대 위치에 있는 div를 일반 흐름의 일부로 처리하여 그에 따라 div 사이에 공간을 분배합니다. 이 동작은 표준과 다르며 정렬 오류로 이어질 수 있습니다.

해결 방법:

Firefox는 Flexbox 사양에 맞춰 버전 52에서 이 문제를 해결했습니다. 그러나 IE11은 여전히 ​​문제가 있습니다. 이 문제를 해결하려면:

• 절대 위치에 있는 항목의 위치를 ​​변경하세요. 절대 위치에 있는 div(.bg)를 끝에 배치하는 대신 다른 두 항목(.c1 및 .c2). 이렇게 하면 흐름 순서가 변경되어 일반 흐름에서 절대 위치에 있는 요소가 효과적으로 제거됩니다.

업데이트된 HTML 코드는 다음과 같습니다.

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

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