::after中的SVG背景图像未在IE中显示答案

【问题标题】：SVG background-image in ::after not showing in IE::after中的SVG背景图像未在IE中显示
【发布时间】：2018-03-21 21:12:10
【问题描述】：

我有这个 SCSS 代码：

.page-collapse {

  // ...

  &__title {
    // ...
    position: relative;

    &::after {
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"%3E%3Ctitle%3Eicon-plus%3C/title%3E%3Cg id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"%3E%3Cg id="modules/cards/events-ext" transform="translate(-183 -1212)" stroke="%232F2F2F" stroke-width="1.5"%3E%3Cg id="ui/plus-black2" transform="translate(184 1213)"%3E%3Cpath d="M7 .5v13m6.5-6.499H.5" id="Line"/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
      background-position: 50%;
      background-size: 100% 100%;
      content: '';
      height: 1rem;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
    }
  }
}

这在 Chrome 和 FF 中运行良好，如下所示：

但不在 IE 中：

难道 IE 不喜欢 ::after-Elements 中的背景图像？因为还有另一种情况，用这段代码（覆盖 Bootstraps (4 alpha.6) 自定义复选框类：

.custom-control-input {

  &:checked {
    ~.custom-control-indicator {
      background-color: $white;
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='12' height='11' viewBox='0 0 12 11' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Styleguide' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='square'%3E%3Cg id='styles-forms' transform='translate(-333 -2181)' stroke-width='1.5' stroke='%232F2F2F'%3E%3Cg id='Group-2' transform='translate(329 2141)'%3E%3Cg id='Group'%3E%3Cpath id='icon-checkmark' d='M5 46.744L7.2 49l7.8-8'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
  }
}

这适用于所有浏览器。我看到的唯一区别是第一种情况是在 ::after 伪元素中。此外，在 IE 开发工具中，相应的 CSS 部分被划掉了：

有什么想法吗？

编辑：我只需要支持到 IE10

【问题讨论】：

你可以尝试给单个冒号 &:after 如此处所述alligator.io/css/before-vs-before IE8 不支持 ::
您好，谢谢您的建议。不幸的是，它没有用。但无论如何我只需要支持到 IE10 :)

标签： css internet-explorer svg

【解决方案1】：

我发现了问题...由于某种原因，IE 中似乎存在某种解析问题，并且将 ' 与 " 交换解决了问题，因此更改此问题：

background-image: url('data:image/svg+xml;charset=utf8,%3Csvg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"%3E%3Ctitle%3Eicon-plus%3C/title%3E%3Cg id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"%3E%3Cg id="modules/cards/events-ext" transform="translate(-183 -1212)" stroke="%232F2F2F" stroke-width="1.5"%3E%3Cg id="ui/plus-black2" transform="translate(184 1213)"%3E%3Cpath d="M7 .5v13m6.5-6.499H.5" id="Line"/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');

到

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Eicon-plus%3C/title%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='square'%3E%3Cg id='modules/cards/events-ext' transform='translate(-183 -1212)' stroke='%232F2F2F' stroke-width='1.5'%3E%3Cg id='ui/plus-black2' transform='translate(184 1213)'%3E%3Cpath d='M7 .5v13m6.5-6.499H.5' id='Line'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

做这份工作...你知道的越多。

【讨论】：

【解决方案2】：

尝试给单个冒号 &:after 说明 here IE8 不支持 ::

【讨论】：

您好，谢谢您的建议。不幸的是，它没有用。但无论如何我只需要支持到 IE10 :)