SVG背景图像中::在IE

问题描述：

没有显示后，我有这样的SCSS代码：SVG背景图像中::在IE

.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

但不是：

的Coul d它是IE浏览器没有在::后的元素，如背景图像？因为还有另一种情况下，使用此代码（重写引导程序（4 alpha.6）自定义CheckBox类：

.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"); 
    } 
    } 
}

而且这是工作在所有的浏览器我看到的唯一区别是第一种情况中的是::伪元素之后另外，在IE的开发工具对应的CSS部分被划掉？

任何想法

编辑：我只需要发upport到IE10

你可以尝试给单个冒号**：在此处所述的**之后https://alligator.io/css/before-vs-before/ IE8不支持** :: ** – user1594

嘿，谢谢对于这个建议。不幸的是，它没有奏效。但我只需要反正下来支持IE10 :) –

答

我发现这个问题......出于某种原因，似乎有某种解析在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");

做的工作......你越了解。

答

先给单个冒号&：后为表示here IE8 doen't支持::

嘿，感谢您的建议。不幸的是，它没有奏效。但我只需要反正下来支持IE10 :) –

SVG背景图像中::在IE

相关推荐