IE11이 절대 위치 Flex 항목을 흐름 내 요소로 처리하는 이유는 무엇입니까?

IE11에서 절대 위치 Flex 항목과 일반 흐름의 상호 작용

컨테이너에 여러 div가 포함되어 있고 그 중 하나가 절대 위치에 있는 상황에서 배경으로 IE11은 Chrome이나 Firefox와 같은 다른 브라우저에 비해 특이한 동작을 나타냅니다. 절대 위치 div가 일반 흐름에서 적절하게 제거되는 반면 IE11은 이를 inflow flex 항목으로 처리하여 div 간에 예기치 않은 공간 분배가 발생합니다.

문제의 근본

문제의 핵심은 IE11의 Flexbox 사양 위반에 있습니다. 사양에 따라 절대 위치에 있는 Flex 하위 요소는 Flex 레이아웃에서 제외되어야 하며 간격 계산에 영향을 주지 않아야 합니다.

해결 방법

IE11에서 이 문제를 완화할 수 있는 몇 가지 해결 방법이 있습니다. :

배경 위치 변경하기 Div

다른 div 뒤에 절대 위치의 배경 div를 배치하는 대신 배경 div를 두 div 사이의 위치로 이동하여 다음과 같은 구조를 만듭니다.

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

요약

IE11과 호환 브라우저 간의 동작 불일치는 IE11의 브라우저에서 발생합니다. Flexbox 사양에 대한 오래된 해석을 고수합니다. 해결 방법 중 하나를 사용하면 개발자는 절대 위치에 있는 플렉스 항목을 처리할 때 브라우저 전반에서 일관된 동작을 보장할 수 있습니다.

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