Question

我在一个位于display:inline-flex的容器中彼此相邻的几个html元素。

这适用于按钮元素，但只要我尝试添加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-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元素转换为Flex容器，请考虑以下事项：

Flexbox not working on <button> element in some browsers

Answer 2

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

＆＃13;

.container {
  display: flex;
  justify-content: center;
  /* align-items: center; you might not need this */
  height: 2em;
}

.container>* {
  height: 100%;
  margin: 10px;
}

＆＃13;

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

＆＃13;

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

2 个答案: