Table cells height calculated differenly in IE11

Question

The problem I face is IE 11 seem to have inconsistent inner height across single while other browsers keep it the sa

Answer 1

Strange and interesting behavior by IE about table-cell here. If you want an approach, you should put the cell on inline-block and set the height value, then align the content using line-height also reset the line-height for the text container like:

td {
  display: inline-block;
  height: 137px;
  position: relative;
  line-height: 137px;
}

p {
  display: inline-block;
  vertical-align: middle;
  background-color: #dedede;
  line-height: 1;
}

Try on IE, I hope this will help you: http://codepen.io/pik_at/pen/WbyZrG