IE 11 :after background size not working

问题

I added a background-image inside the pseudo :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;
}

But the image is way bigger than the actual size of the box.

Any idea how to solve this?

(Working fine in webkit browsers)

!!!Additional Information:

I tried other svg and it works great.

Works:

<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>

Does not work:

<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>

回答1:

Read this link

Adobe Illustrator give me four options to declaring style sheet properties when saving graphics as an SVG file

Presentation Attributes

Style Attributes

Style Attributes (Entity Reference)

Style Elements

No problem using the first three ways to styling properties, but embedding style sheets into SVG content inside a element cause the problem!

回答2:

I had similar issues rendering CSS in IE. My solution:

Make sure you have a <!DOCTYPE> declaration before your html
Add the meta tag <meta http-equiv="X-UA-Compatible" content="IE=edge" > (this makes sure that your code always renders the cutting edge or most updated version of internet explorer; else, it can render from older versions and things get really messy.)

I hope that helps.

回答3:

Try adding in display:block to the css.

来源：https://stackoverflow.com/questions/38069695/ie-11-after-background-size-not-working

标签

css

internet-explorer-11