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

I finally managed to do that. Here is the code, hope it helps. Fiddle here.

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

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

tr {
    border: 1px solid red;
}

td {
    vertical-align:center;
    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;
}

    

        

            
Save me!

        
        

            
From problems

        
        

            
With IE