CSS table layout height with svg image in IE - html

Question

Taking a look at the code below and the fiddle, can some please tell my why in IE (9-10-11) the height of the svg image is not matching the height of the sibling (content on right) like in chrome, FF, Safari?
In IE there is extra vertical space in the left table-cell.
Thank-you
HTML
<div class="table-layout">
<div class="table-cell fixed-width">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 180.22 150.718" enable-background="new 0 0 180.22 150.718" xml:space="preserve">
<circle fill="#E3E3E3" cx="91.5" cy="75.167" r="75.167" />
</svg>
</div>
<div class="table-cell" style="border: solid red 1px">
<div class="row">
<div class="col-xs-12">content</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-sm-6">content</div>
<div class="col-sm-6">content</div>
</div>
</div>
<div class="col-lg-6">content</div>
</div>
</div>
CSS
.table-layout {
display: table;
width: 100%;
table-layout: fixed;
}
.table-layout .table-cell {
display: table-cell;
border: solid 1px #ccc;
vertical-align: top;
}
.fixed-width {
vertical-align: middle !important;
background-color: #a3a3a3;
width: 60px;
padding: 5px;
}
fiddle: http://jsfiddle.net/gp2nqzh0/1/

Answer 1

Remove width:100%; from .table-layout and it will work fine.

Answer 2

This is an old post but still relevant.
For those of you that don't have IE (hopefully most) or an emulator and want to see the issue, I've attached a screenshot.
Fix: set both a height and width on your svg element.
.fixed-width svg {
width: 60px;
height: 60px;
}
I tested your fiddle on IE 11 using Browserstack and can confirm it works. Setting max-width and max-height attributes also works.
WHY is this happening?
I recommend reading this article to fully understand the behavior of svgs in browsers: https://css-tricks.com/scale-svg/ BONUS: This also has solutions for many scenarios.
BUT for this case, your answer is below (from the article),
Many browsers—IE, Safari, and versions of Opera and Chrome released prior to summer 2014—will not auto-size inline SVG. If you don't specify both height and width, these browsers will apply their usual default sizes, which as mentioned previously will be different for different browsers. The image will scale to fit inside that height or width, again leaving extra whitespace around it. Again, there are also inconsistencies in what happens if you leave both height and width auto.
Internet Explorer cuts the difference, using width of 100% and height of 150px for images and inline SVG.
Because you have a fixed-width class on your div, I assume you don't need to worry about scalability and setting the fixed width and height on the svg will suffice.