html - inline-flex 输入元素在 IE11 中换行

Question

我在一个容器中有几个 html 元素并排放置在 display:inline-flex 中。

这适用于按钮元素，但只要我尝试添加 input type="text" 元素，文本框就会放置在按钮下方(仅在 Internet Explorer 11 中；不确定关于 IE10 或以下)。

它在 Firefox、Chrome 甚至 Edge 中按预期工作(文本框与按钮在同一行)。

如何让 IE 正确显示它？

请参阅 jsFiddle 以获取完整的 html 和 css 代码来说明问题: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-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>

此外，由于您要将 button 元素制作成 flex 容器，请考虑以下事项:

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