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

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相關的錯誤 。

在這種情況下，一個簡單易用的解決方案是使父級成為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>元素

Answer 2

簡單的解決方案只需添加display:flex to parent

 .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>