IE11在新行显示每个{display：table-cell}元素 [英] IE11 shows every { display: table-cell } element at a new line

问题描述

我有以下HTML（ JSFiddle ）：

I have the following 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：

And the following 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 被渲染为第一个。

It looks as expected in all browsers (Chrome, FF etc.): both inputs are on the same row.
But in IE11 the second input is rendered under the first one.

有人知道为什么它是如此以及如何在IE中以与其他浏览器相同的方式显示它？

Does anybody know why it's so and how to make it to be shown in IE the same way as in the other browsers?

推荐答案

我提交了 bug报告，它已被接受为这个问题。

I submitted a bug report to the IE development team and it has been accepted as the issue.

我会在更改错误状态后更新这篇文章。

I'll update this post upon changing the status of the bug.

这篇关于IE11在新行显示每个{display：table-cell}元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！