IE10에서 Flexbox가 예기치 않게 동작하는 이유는 무엇입니까?

IE10의 Flexbox 호환성 문제

IE10에서 Flexbox로 작업할 때 예기치 않은 동작이 발생할 수 있습니다. Flexbox 구문은 지원되지만 최신 구현과 다른 "tween" 사양에 따라 작동합니다.

코드에서 input[type=text]에 대한 flex 속성을 지정할 때 문제가 발생합니다. IE10에는 브라우저 간 호환성을 위해 flex 대신 -ms-flex를 사용해야 하는 약간 다른 구문이 필요합니다. 또한 이전 브라우저를 지원하는 데 필요한 모든 공급업체 접두사가 포함되어 있는지 확인하세요.

문제를 해결하는 업데이트된 CSS는 다음과 같습니다.

.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;
    -ms-flex: auto 1;
}

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