IE 11：背景大小不起作用后答案

【问题标题】：IE 11 :after background size not workingIE 11：背景大小不起作用后
【发布时间】：2016-10-30 09:30:52
【问题描述】：

我在伪 :after 中添加了一个背景图像

::after {
  content: '';
  display: block;
  position: absolute;
  right: -2.5rem;
  bottom: -1.5rem;

  height: 9.5rem;
  width: 9.5rem;
  background-image: url('../img/icons/icon_logo.svg');
  background-repeat: no-repeat;
  // background-size: 100% auto;
  background-size: cover;
}

但是图片比盒子的实际大小要大很多。

知道如何解决这个问题吗？

（在 webkit 浏览器中工作正常）

!!!其他信息：

我尝试了其他 svg，效果很好。

作品：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
  <path fill="#FF6C00" d="M0 0h64v64H0z"/>
  <path fill="#FFF" d="M33 0C22 0 13 9 ..."/>
</svg>

不起作用：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
  <path fill="#FFF" d="M0 0h64v64H0z"/>
  <defs>
       <path id="a" d="M0 0h64v64H0z"/>
  </defs>
  <clipPath id="b">
       <use xlink:href="#a" overflow="visible"/>
  </clipPath>
  <path fill="#277052" d="M43.7 51.8s-...."/>
  <defs>
       <path id="c" d="M0 0h64v64H0z"/>
  </defs>
  <clipPath id="d">
       <use xlink:href="#c" overflow="visible"/>
  </clipPath>
  <path fill="#EE7203" d="M40.7 28.7c0 4.8-3..." clip-path="url(#d)"/>
  <path fill="#1D1D1B" d="M43 10.9c.2.1.4 0..." clip-path="url(#d)"/>
</svg>

【问题讨论】：

你能为此提供小提琴吗？
html -> font-size 有什么价值？
@MinalChauhan 还没搞定
@Vucko font-size: 我试过 1px 到 18px 之间
IE11 using svg as background-image fails的可能重复

标签： css internet-explorer-11

【解决方案1】：

阅读此link

Adobe Illustrator 在将图形保存为 SVG 文件时为我提供了四种声明样式表属性的选项

演示属性

样式属性

样式属性（实体参考）

样式元素

使用前三种方式设置属性样式没有问题，但是将样式表嵌入元素内的 SVG 内容会导致问题！

【讨论】：

【解决方案2】：

我在 IE 中渲染 CSS 时遇到了类似的问题。我的解决方案：

确保在您的 html 之前有一个 <!DOCTYPE> 声明
添加元标记<meta http-equiv="X-UA-Compatible" content="IE=edge" >（这可确保您的代码始终呈现最先进或最新版本的 Internet Explorer；否则，它可以从旧版本呈现，事情变得非常混乱。）

希望对你有帮助。

【讨论】：

【解决方案3】：

尝试将 display:block 添加到 css 中。

【讨论】：

试试 background-size: cover;太