IE10和11中缩放后的SVG的页边距奇怪

Question

我想显示一个SVG图标列表。这适用于除IE 10和11之外的所有浏览器。IE在SVG周围添加了一个奇怪的不可见填充。

我已将SVG图标放置在这样的列表中：

<ul class="c-category-list">
  <li class="c-category-list__item"><a href="#" class="c-category-list__link"><img src="https://image.flaticon.com/icons/svg/912/912316.svg" alt="" class="c-category-list__image"></a></li>
  <li class="c-category-list__item"><a href="#" class="c-category-list__link"><img src="https://image.flaticon.com/icons/svg/912/912316.svg" alt="" class="c-category-list__image"></a></li>
  <li class="c-category-list__item"><a href="#" class="c-category-list__link"><img src="https://image.flaticon.com/icons/svg/912/912316.svg" alt="" class="c-category-list__image"></a></li>
  <li class="c-category-list__item"><a href="#" class="c-category-list__link"><img src="https://image.flaticon.com/icons/svg/912/912316.svg" alt="" class="c-category-list__image"></a></li>
  <li class="c-category-list__item"><a href="#" class="c-category-list__link"><img src="https://image.flaticon.com/icons/svg/912/912316.svg" alt="" class="c-category-list__image"></a></li>
  <li class="c-category-list__item"><a href="#" class="c-category-list__link"><img src="https://image.flaticon.com/icons/svg/912/912316.svg" alt="" class="c-category-list__image"></a></li>
  <li class="c-category-list__item"><a href="#" class="c-category-list__link"><img src="https://image.flaticon.com/icons/svg/912/912316.svg" alt="" class="c-category-list__image"></a></li>
</ul>

我的CSS（无礼）看起来像这样：

.c-category-list
  padding: 0;
  margin: 0;
  list-style: none;

  &__item{
    display: inline-block;
  }

  &__image {
    height: 4em;
  }
}

我制作了一个用于调试目的的代码笔：https://codepen.io/anon/pen/JZLaae

在其他浏览器（Firefox，Chrome等）中，它显示如下输出：

但是在IE11和IE10中，所有图标之间都有一个空白。输出如下：

Answer 1

1）图像本身在左右之间有更多空间。因此它显示图像之间的空间。尝试裁剪图像，然后再试一次。空间将被删除。

2）使用display裁剪图像后：inline-block;图像之间将有默认空间。建议的方式是与display一起使用：flex。

Answer 2

使用// This is the value to be validated String value = fetchValue(); // my regular expression String format = "^\\d{0,5}(?:[\\.\\,]\\d{0,2})?$"; boolean isValid = value.matches(format); ，似乎IE处理display: inline;的方式有所不同。

这是最终的SCSS：

inline-block

带有已编译SCSS的输出应如下所示：

$component: "c-category-list";
.#{$component} {
  padding: 0;
  margin: 0;

  &__item{
    display: inline;
  }

  &__image {
    height: 4em;
    background: red;
  }
}

.c-category-list {
  padding: 0;
  margin: 0;
}

.c-category-list__item {  
  display: inline;
}

.c-category-list__image {
  height: 4em;
  background: red;
}

这是Codepen链接：https://codepen.io/anon/pen/pKLqWe

Answer 3

这是IE的一个怪癖，不确定是否有更好的方法，但是我不得不通过指定svg的宽度和高度来解决它。

.c-category-list {
  padding: 0;
  margin: 0;
  list-style: none;
 }

.c-category-list__item {
  display: inline-block;
}

.c-category-list__image {
  width: 4em;
  height: 4em;
}

<ul class="c-category-list">
  <li class="c-category-list__item"><a href="#" class="c-category-list__link"><img src="https://image.flaticon.com/icons/svg/912/912316.svg" alt="" class="c-category-list__image"></a></li>
  <li class="c-category-list__item"><a href="#" class="c-category-list__link"><img src="https://image.flaticon.com/icons/svg/912/912316.svg" alt="" class="c-category-list__image"></a></li>
  <li class="c-category-list__item"><a href="#" class="c-category-list__link"><img src="https://image.flaticon.com/icons/svg/912/912316.svg" alt="" class="c-category-list__image"></a></li>
  <li class="c-category-list__item"><a href="#" class="c-category-list__link"><img src="https://image.flaticon.com/icons/svg/912/912316.svg" alt="" class="c-category-list__image"></a></li>
  <li class="c-category-list__item"><a href="#" class="c-category-list__link"><img src="https://image.flaticon.com/icons/svg/912/912316.svg" alt="" class="c-category-list__image"></a></li>
  <li class="c-category-list__item"><a href="#" class="c-category-list__link"><img src="https://image.flaticon.com/icons/svg/912/912316.svg" alt="" class="c-category-list__image"></a></li>
  <li class="c-category-list__item"><a href="#" class="c-category-list__link"><img src="https://image.flaticon.com/icons/svg/912/912316.svg" alt="" class="c-category-list__image"></a></li>
</ul>

Answer 4

好吧，看来这是IE中的错误或类似问题，但我现在找到了解决方法。我没有直接调整SVG的大小，而是将父级的大小调整为固定的高度，然后将SVG的高度设置为100％。这似乎有效。

.image-wrapper {
  display: inline-block;
  background: red;
  margin: 0;
  height: 4em;
}

.image {
  height: 100%;
}

Codepen：https://codepen.io/anon/pen/RJMqLM