2016-06-28 4 views
0

я добавил фоновое изображение внутри псевдо: послеIE 11: после фона размер не работает

::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> 
+0

Вы можете предоставить скрипку для этого? –

+0

Какое значение у вас есть для 'html -> font-size'? – Vucko

+0

@MinalChauhan no fiddle yet – Dinkheller

ответ

0

Попробуйте добавить в дисплей: блок в CSS.

+0

все еще без изменений – Dinkheller

+0

Попробуйте размер фона: обложка; тоже – rrd

+0

по-прежнему без изменений – Dinkheller

0

У меня были похожие проблемы, отображающие CSS в IE. Мое решение:

  • Убедитесь, что вы есть <!DOCTYPE> декларацию до вашего HTML
  • Добавить мета тег <meta http-equiv="X-UA-Compatible" content="IE=edge" > (это гарантирует, что ваш код всегда делает режущую кромку или самую последнюю версию интернет-исследователя, иначе, он может отображать из более старых версий, и все становится очень грязным.)

Надеюсь, что это поможет.

1

Читать эту link

Adobe Illustrator дать мне четыре варианта декларированию таблицы стилей свойств при сохранении графики в формате SVG

  • Атрибуты представления

  • Атрибуты стиля

  • Атрибуты стиля (En Tity Reference)

  • Элементы стиля

Нет проблемы, используя первые три способа свойства укладки, но вложение таблиц стилей в содержание SVG внутри элемента вызывает проблему!

Смежные вопросы