IE11 Shows Every { Display: Table-cell } Element At A New Line

I have the following HTML (JSFiddle):

Solution 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#

Solution 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.

Share