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

问题:

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#