IE11示出了每{显示：表单元}在一个新的线元件(IE11 shows every { displa

我有以下的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 s为同一行。
但在IE11第二input是根据第一个呈现。

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

Answer 1:

我提交了一个bug报告给IE开发团队，并已被接受的问题。

我会在改变错误的状态更新这个帖子。

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>

欲了解更多信息，请检查Microsoft错误https://connect.microsoft.com/IE/feedbackdetail/view/1263383/ie11-shows-every-html-input-element-with-display-table-cell-css-style-at -a新线＃

文章来源: IE11 shows every { display: table-cell } element at a new line