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

Question

看看下面的代码和小提琴，有人能告诉我为什么在 IE (9-10-11) 中 svg 图像的高度与兄弟图像的高度不匹配（右侧的内容），如铬、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

这是一篇旧帖子，但仍然相关。

对于那些没有 IE（希望是大多数）或模拟器并想查看问题的人，我附上了屏幕截图。

修复：在 svg 元素上设置高度和宽度。

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

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

为什么会这样？

我建议阅读这篇文章以全面了解 svgs 在浏览器中的行为：https://css-tricks.com/scale-svg/ BONUS：这也有许多场景的解决方案。

但是对于这种情况，您的答案如下（来自文章），

许多浏览器（IE、Safari 以及 2014 年夏季之前发布的 Opera 和 Chrome 版本）不会自动调整内联 SVG 的大小。如果您没有同时指定高度和宽度，这些浏览器将应用它们通常的默认尺寸，正如前面提到的，对于不同的浏览器，这些尺寸会有所不同。图像将缩放以适应该高度或宽度，再次在其周围留下额外的空白。同样，如果您将高度和宽度都设为自动，会发生什么不一致。

Internet Explorer 消除了差异，对图像和内联 SVG 使用 100% 的宽度和 150 像素的高度。

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

Answer 2

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