IE10에서 Flexbox가 작동하지 않는 이유는 무엇입니까?

Flexbox 레이아웃은 IE10에서 유효하지 않습니다: 이유 탐색

IE10에서 다음 코드가 올바르게 작동하지 않습니다.

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

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

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

문제 현상: input[type=submit]의 너비는 31px이어야 하며, input[type=text]는 양식에서 남은 사용 가능한 공간을 차지해야 합니다. 그러나 입력[유형=텍스트]의 너비는 설명할 수 없을 정도로 기본값이 263px입니다.

코드는 Chrome과 Firefox에서 잘 실행됩니다.

설명:

IE에서는 Flexbox 레이아웃 모드가 아직 (완전히) 기본적으로 지원되지 않습니다. IE10은 완전히 최신은 아니지만 여전히 작동하는 "트윈" 버전의 사양을 구현합니다.

이 기사에서는 IE에서 Flexbox 레이아웃을 사용할 때 CSS-Tricks에서 제공하는 다음 팁을 사용할 것을 권장합니다.

• 공급업체 접두어
• 를 사용하여 명시적인 flex- 방향(기본값이더라도)
• 사용되지 않는 속성(예: -webkit-box-flex) 사용을 피하세요

IE10 Flexbox 레이아웃 모드는 2012년 3월 W3C 초안 사양이 발표되었으며 약 1년여 만에 최신 초안이 업데이트되었습니다.

위 내용은 IE10에서 Flexbox가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!