我在一个带有display：inline-flex的容器中彼此相邻的几个html元素.
这适用于按钮元素,但只要我尝试添加输入类型=“文本”元素,文本框就会放在按钮下方(仅限Internet Explorer 11;不确定IE10或更低版本).
它在Firefox,Chrome甚至Edge中按预期工作(与按钮位于同一行的文本框).
如何让IE正确显示？
有关完整的html和css代码,请参阅jsFiddle以说明问题：https://jsfiddle.net/vm2kcwd9/1/
.container {
height: 2em;
}
.container>* {
height: 100%;
display: inline-flex;
vertical-align: top;
justify-content: center;
align-items: center;
}
<div class="container"> <button>test</button> <button>test 2</button> <button>test 3</button> <input type="text" value="hello" /> </div>
解决方法
IE11以拥有许多
flex-related bugs而闻名.
在这种情况下,一个简单易用的解决方案是使父级成为Flex容器：
.container {
display: flex; /* new; forces all children into a single row */
height: 2em;
}
.container>* {
height: 100%;
display: inline-flex;
/* vertical-align: top; <--- not necessary anymore */
justify-content: center;
align-items: center;
margin: 5px; /* for demo only */
}
<div class="container"> <button>test</button> <button>test 2</button> <button>test 3</button> <input type="text" value="hello" /> </div>
此外,由于您将按钮元素制作成Flex容器,请考虑以下因素：
