Why is Flexbox behaving unexpectedly in IE10?

Flexbox Compatibility Issues in IE10

When working with Flexbox in IE10, you may encounter unexpected behavior. While Flexbox syntax is supported, it operates under the "tween" specification, which differs from newer implementations.

In your code, the issue arises when specifying the flex property for input[type=text]. IE10 requires a slightly different syntax, where you should use -ms-flex instead of flex for cross-browser compatibility. Additionally, ensure that all necessary vendor prefixes are included to support older browsers.

Here's the updated CSS that should resolve the issue:

.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;
}

The above is the detailed content of Why is Flexbox behaving unexpectedly in IE10?. For more information, please follow other related articles on the PHP Chinese website!