html – inline-flex输入元素在IE11中突破到新行

我在一个带有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容器,请考虑以下因素：

> Flexbox not working on <button> element in some browsers