IE11 показывает каждый {дисплей: таблица-элементная} элемент на новой линии

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 s находятся в одной строке.
Но в 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#