IE11 在新行显示每个 { display: table-cell } 元素

Question

我有以下 HTML (JSFiddle):

<div class="form-group tabled-contents">
    <div style="display: table-row;">
        <input id="BodyContentPlaceholder_TxtCustomerId" type="text">
        <input id="BodyContentPlaceholder_BtnShowByCustomerId" type="submit" value="Show">
    </div>
</div>

以及以下 CSS：

.tabled-contents {
    display: table;
    width: 100%;
}

.form-group input[type=text], .form-group input[type=submit] {
    display: table-cell;
    width: 200px;
}

它在所有浏览器（Chrome、FF 等）中看起来都符合预期：两个 input 都在同一行。
但是在 IE11 中，第二个 input 在第一个下面呈现。

有谁知道为什么会这样以及如何使它在 IE 中以与在其他浏览器中相同的方式显示？

Answer 1

我向 IE 开发团队提交了一个 bug report，它已被接受为问题。

我会在更改错误状态后更新此 post。

Answer 2

解决方法

加一个空的div

<div style="width:0;display:table-cell"></div>

示例 Codepen http://codepen.io/vinaymavi/pen/JWjxJb

<div style="display:table">
  <div style="width:0;display:table-cell"></div>
  <div style="display:table-cell;border:1px solid;">
   Cell-1
  </div>
  <div style="width:0;display:table-cell"></div>
  <div style="display:table-cell;border:1px solid;">
    Cell-2
  </div>
  <div style="width:0;display:table-cell"></div>
  <div style="display:table-cell;border:1px solid;">
    Cell-3
  </div>
</div>

更多信息请查看微软错误 https://connect.microsoft.com/IE/feedbackdetail/view/1263383/ie11-shows-every-html-input-element-with-display-table-cell-css-style-at-a-new-line#

Answer 3

使用 'table' 显示属性和 'table-row' 显示属性作为包装元素，但不要使用 'table-cell' 属性用于输入元素。只是不要为那些内联元素设置显示属性。一切都会很好，即使在 ie 国家 :) p.s。 - 用 div 或其他元素包裹输入元素会污染语义结构，它应该尽可能保持简单和真实。

IE11 在新行显示每个 { display: table-cell } 元素

IE11 shows every { display: table-cell } element at a new line

html

css

internet-explorer

browser

cross-browser