Table cells height calculated differently in IE11

http://stackoverflow.com/questions/28763820/table-cells-height-calculated-differenly-in-ie11/28764641

by Balint Pekker

HTML

<table cellspacing="1" cellpadding "0" border="0">
    <tr>
        <td>
            <span class="bar"></span><p class="tall">Save me!</p><span class="bar"></span>
        </td>
        <td>
            <span class="bar"></span><p class="medium">From problems</p><span class="bar"></span>
        </td>
        <td>
            <span class="bar"></span><p class="short">With IE</p><span class="bar"></span>
        </td>
    </tr>
</table>

CSS

body {
    padding:15px;
}
table {
    border: 1px solid black;
    border-spacing: 10px;
    cell-spacing: 0;    
}

tr {
    border: 1px solid red;
}

td {
    vertical-align:center;
    background:white;
    padding:4px;
    width:33.33%;
    position:relative;
    box-sizing: border-box;
  position: relative;
  border: 1px solid black;
}

td .bar:first-child,
td .bar:last-child {
    display: block;
    background: green;
    width: 3px; 
    left: -5px;
    height: 100%;
    position: absolute; top: 0; 
    z-index: 1;
}

p {
  margin: 0;
  background-color: #dedede;
  padding: 0px;
}

.tall {
  height: 100px;
}

.medium {
  height: 60px;
}

.short {
  height: 30px;
}

JavaScript

(function () {
    
    "use strict";

    if ( document.documentMode && document.documentMode < 12 ) {
        var spans = document.querySelectorAll( "span.bar" ),
            count = spans.length;
        while ( count-- ) {
            spans[count].style.height = spans[count].parentElement.offsetHeight + "px";
        }
    }

}());