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

Posted 2023-03-06

【中文标题】IE10 和 11 中缩放 SVG 的奇怪边距

【英文标题】：Strange margin on scaled SVG in IE10 and 11

【发布时间】：2018-11-30 15:00:49

【问题描述】：

我想显示一个 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"  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"  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"  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"  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"  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"  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"  class="c-category-list__image"></a></li>
</ul>

我的 css (sass) 看起来像这样：

.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 中，所有图标之间都有一个边距。输出如下：

【问题讨论】：

试试padding: 0;到&__item

thnx，但这不起作用

和margin:0 ??

不，我认为这不是实际的边距或填充行为，而是需要更多空间的东西。看起来有点像 IE 错误..

对不起，我在 IE 中没有看到任何空格

【参考方案1】：

1) 图像本身在左右之间有更多空间。所以它显示图像之间的空间。尝试裁剪图像并重试空间将被删除。

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

【讨论】：

是的，我知道。但是 IE11/10 中的空间比其他浏览器要大很多。这不是因为我认为图像中的空间。我也试过 flex。

【参考方案2】：

使用display: inline;，看来IE对inline-block的处理方式不同。

这是最终的 SCSS：

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

  &__item
    display: inline;
  

  &__image 
    height: 4em;
    background: red;
  

编译后的 SCSS 的输出应如下所示：

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


.c-category-list__item   
  display: inline;


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

<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"  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"  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"  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"  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"  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"  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"  class="c-category-list__image"></a>
  </li>
</ul>

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

【讨论】：

很抱歉，我仍然看到 IE11/10 上的元素周围有更多空间。比较 Chrome en IE10/11 上的这个 codepen 以获得更好的示例：codepen.io/anon/pen/wXmYOj

@Royw 我已经更新了。怎么办？？我想这次它工作了。

我自己发布了一个解决方法，但这要好得多。谢谢！

@Royw 更多更新版本在这里：codepen.io/anon/pen/MXVzGa。也许你会喜欢它并且正是你想要的。

【参考方案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"  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"  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"  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"  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"  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"  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"  class="c-category-list__image"></a></li>
</ul>

【参考方案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