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

Posted 2023-03-05

【中文标题】inline-flex 输入元素在 IE11 中换行

【英文标题】：inline-flex input element breaks to new line in IE11

【发布时间】：2017-09-11 19:13:49

【问题描述】：

我在一个以display:inline-flex 定位的容器中有几个相邻的 html 元素。

这适用于按钮元素，但一旦我尝试添加 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>

【参考方案1】：

IE11 以拥有许多 flex-related bugs 而闻名。

在这种情况下，一个简单易行的解决方案是让父容器成为弹性容器：

.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 元素放入弹性容器中，请考虑一下：

Flexbox not working on <button> element in some browsers

【讨论】：

嗯，这很简单，谢谢。虽然，这也会稍微改变容器内元素的行为。例如：我必须添加 flex-shrink: 0;给孩子们以防止他们缩小（当容器没有显示时不会发生：flex）。

是的，flex-shrink 默认是启用的。尽管如此，好处远远超过任何过渡性调整。现在您不需要垂直对齐。现在你可以使用 flex 属性了。

【参考方案2】：

简单的解决方案只需将display:flex 添加到父级

.container 
  display: flex;
  justify-content: center;
  /* align-items: center; you might not need this */
  height: 2em;


.container>* 
  height: 100%;
  margin: 10px;

<div class="container">
  <button>test</button>
  <button>test 2</button>
  <button>test 3</button>
  <input type="text" value="hello" />
</div>