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

來源

2017-10-10 Patrick Manser

你可以嘗試給單個冒號**：在此處所述的**之後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");

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

來源

2017-10-10 13:56:42

先給單個冒號&：後爲表示here IE8 doen't支持::

來源

2017-10-10 12:55:03 user1594

嘿，感謝您的建議。不幸的是，它沒有奏效。但我只需要反正下來支持IE10 :) –

SVG背景圖像中::在IE

回答

相關問題