html - IE中带有svg图像的CSS表格布局高度

Question

看看下面的代码和 fiddle ，有人能告诉我为什么在 IE (9-10-11) 中，svg 图像的高度与 sibling (右边的内容)的高度不匹配，就像在Chrome、FF、Safari？

在 IE 中，左侧表格单元格中有额外的垂直空间。

谢谢

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

从 .table-layout 中删除 width:100%; 它将正常工作。