一尘不染

CSS Flexbox在IE10中不起作用

css

在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]占用内的其余可用空间forminput[type=text]由于某种原因,发生的事情只是默认为263px。

在Chrome和Firefox中可以正常运行。


阅读 706

收藏
2020-05-16

共1个答案

一尘不染

IE尚不完全支持Flex布局模式。IE10实现了规范的“补间”版本,该版本不是完全最新的,但仍然可以使用。

2020-05-16