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

问题

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>

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;
}

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.

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?

回答1:

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.

回答2:

Workaround

add an empty div

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

Example 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>

For more info please check Microsoft bug https://connect.microsoft.com/IE/feedbackdetail/view/1263383/ie11-shows-every-html-input-element-with-display-table-cell-css-style-at-a-new-line#

回答3:

use the 'table' display property and the 'table-row' display property for the wrapping elements, but don't use the 'table-cell' property for the input element. just don't set the display property for those inline elements. and everything will work just fine, even in ie country :) p.s. - wrapping an input element with a div or other element contaminates the semantic structure, it should remain simple and true to meaning as much as possible.

来源：https://stackoverflow.com/questions/29748662/ie11-shows-every-display-table-cell-element-at-a-new-line

标签

html

css

internet-explorer

browser

cross-browser