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

Question

我在一个容器中有一些html元素彼此相邻display:inline-flex.

这适用于按钮元素,但只要我尝试添加input type="text"元素,文本框就会放在按钮下方(仅限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>

Answer 1

众所周知,IE11存在许多与flex相关的错误.

在这种情况下,一个简单易用的解决方案是使父级成为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>

此外,由于您将button元素制作成Flex容器,请考虑以下因素:

• Flexbox在某些浏览器中无法处理<button>元素