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，但它已被接受为问题。

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

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-new-line#

Answer 3

将'table'显示属性和'table-row'显示属性用于包装元素，但不要将'table-cell'属性用于输入元素。只是不要为这些内联元素设置display属性。而且一切都会很好，即使在国家:) ps。 -用div或其他元素包装输入元素会污染语义结构，应尽可能保持简洁和真实。

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

3 个答案: