Internet Explorer 11을 포함한 여러 브라우저에서 Flexbox가 일관되게 작동하도록 하려면 어떻게 해야 합니까?

Flexbox 및 Internet Explorer 11: Display:flex in ?

"부동" 레이아웃과 CSS Flexbox를 수용하면 Internet Explorer 11에서 호환성 문제가 발생할 수 있습니다. 주요 브라우저는 일반적으로 Flexbox를 지원하지만, IE11은 특정 과제를 제시합니다.

"고정 바닥글" 수수께끼

"Solved by Flexbox"의 "고정 바닥글" 예제는 IE11에서 문제를 겪었습니다. 요소 및 너비:100%를 에 적용했지만 문제가 해결되었습니다. 이 해결 방법의 근거를 이해하는 것이 중요합니다.

IE10 및 IE11의 flex 기본값은 초안 사양과 다르므로 flex:1과 같은 CSS 선언이 발생할 경우 일관되지 않은 동작이 발생합니다. 이를 1 0 0으로 수정하면 브라우저 간 호환성이 보장됩니다.

"미디어 개체" Enigma 다루기

"미디어 개체" 예제는 IE11에서 추가적인 장애물에 직면합니다. CSS를 조작하려는 다양한 시도는 성공하지 못했습니다. 안타깝게도 IE11에서 기능을 구현하기 위한 깔끔한 솔루션은 아직 찾기 어렵습니다.

호환성 고려 사항

앞서 언급한 "고정 바닥글" 예에 대한 해결 방법은 의도치 않게 Firefox의 렌더링을 방해할 수 있습니다. 이 문제를 해결하려면 아래와 같이 특별히 Mozilla를 대상으로 하는 해킹을 사용하세요.

@-moz-document url-prefix() {
  #flexible-content {
    flex: 1;
  }
}

브라우저 공급업체는 W3C의 후보 상태로 인해 Flexbox를 다르게 해석할 수 있습니다. 그러나 이는 표준이 성숙해짐에 따라 안정화될 것입니다. 대체 솔루션을 제공해 주시면 대단히 감사하겠습니다.

위 내용은 Internet Explorer 11을 포함한 여러 브라우저에서 Flexbox가 일관되게 작동하도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!