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

Question

看看下面的代码和小提琴，请告诉我为什么在IE (9-10-11) svg图像的高度不匹配兄弟(内容在右边)的高度，像在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;
   }

小提琴：http://jsfiddle.net/gp2nqzh0/1/

Answer 1

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

Answer 2

这是一个老帖子，但仍然有意义。

对于那些没有IE (希望大多数人)或仿真器的人来说，我附上了一个截图。

​

​

解决方法：在svg元素上设置高度和宽度。

.fixed-width svg {
     width: 60px;
     height: 60px;
}

我在IE 11上使用Browserstack测试了你的小提琴，我可以确认它可以工作。设置max-width和max-height属性也是有效的。

为什么会发生这种情况？

我推荐阅读这篇文章来完全理解浏览器中svg的行为：https://css-tricks.com/scale-svg/奖励:这也提供了针对许多场景的解决方案。

但对于这种情况，您的答案如下(来自文章)，

许多浏览器-IE，Safari，以及2014年夏天之前发布的Opera和Chrome版本-不会自动调整内联SVG的大小。如果不同时指定高度和宽度，这些浏览器将应用其通常的默认大小，如前所述，不同浏览器的默认大小会有所不同。图像将缩放以适应该高度或宽度，并在其周围保留额外的空格。同样，如果将高度和宽度都保留为auto，会发生什么情况也是不一致的。

Internet Explorer减少了不同之处，图像和内联SVG使用100%的宽度和150px的高度。

因为您的div中有一个fixed-width类，所以我假设您不需要担心可伸缩性，在svg上设置固定的宽度和高度就足够了。