>웹 프론트엔드 >CSS 튜토리얼 >IE10에서 Flexbox 문제를 어떻게 해결할 수 있나요?

IE10에서 Flexbox 문제를 어떻게 해결할 수 있나요?

Barbara Streisand
Barbara Streisand원래의
2024-11-18 07:54:02428검색

How Can I Fix Flexbox Issues in IE10?

IE10의 Flexbox 문제 해결

IE10의 Flexbox 구현은 비기본 지원으로 인해 예기치 않은 동작이 나타날 수 있습니다. 이는 IE10이 제한 사항이 있는 오래된 버전의 Flexbox 사양을 사용하기 때문에 발생합니다.

이러한 문제를 해결하려면 다음 사항을 이해하는 것이 중요합니다.

  • Flexbox는 IE10에서 완전히 지원되지 않습니다. IE를 기본 기능으로 사용합니다.
  • IE10은 2012년 3월 W3C 초안에 해당하는 "tween" 버전의 사양을 구현합니다.
  • Flexbox 사양의 현재 버전은 이후 여러 개정을 거쳤습니다. then.

보고된 특정 문제

IE10에서 Flexbox가 올바르게 작동하지 않는다고 보고된 문제는 IE 호환성을 위한 코드에서 최신 Flexbox 구문을 사용하는 데서 비롯됩니다. . 구체적으로:

  • display: flex 선언이 IE10에서 지원되지 않는 구문을 사용하고 있습니다.

해결책

해결 방법 이 문제에서는 접두사 속성이 포함된 IE10의 "tween" 구현에서 지원되는 구문을 사용하도록 코드를 조정합니다.

.flexbox form {
    display: -ms-flex;
    -ms-flex-direction: row;
}

.flexbox form input[type=submit] {
    width: 31px;
}

.flexbox form input[type=text] {
    width: auto;
    display: -ms-flex;
    -ms-flex: auto 1;
}

이러한 변경 사항은 IE의 "tween" Flexbox 구현을 대상으로 하며 예상되는 동작을 복원해야 합니다.

추가 리소스

크로스 브라우저 Flexbox 호환성에 대한 자세한 내용은 다음 리소스를 참조하세요.

  • [Mozilla Flexbox 가이드](https //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
  • [CSS-Tricks: Flexbox 사용](http://css-tricks.com/using- flexbox/)
  • [W3C Flexbox 사양](http://dev.w3.org/csswg/css-flexbox/)

위 내용은 IE10에서 Flexbox 문제를 어떻게 해결할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.