I use svg sprites for icons.

Here is the layout in all browsers (chrome, opera, Mosel): enter image description here

This is what explorer 11 looks like. enter image description here

  .menu-two__icon { width: 58px; height: 50px; margin-bottom: 7px; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; background: url("../img/svg/principles.svg") no-repeat; -webkit-background-size: auto 200%; background-size: auto 200%;

This is the first time I've come across this, before everything worked perfectly in explorer. Looking through old projects and can not understand. The code is similar, the sprites are similar, but it works there, but not here.

Tell me what could be the problem. At least a hypothesis. Maybe someone came across this.

    1 answer 1

    Found a problem. I gave little information on the issue, because I myself did not know what the problem might be and what information should be given.

    It turned out the fault was in the svg itself. You just need to set the width and height the svg , for example:

    It was:

     // Не корректно отображается в explorer <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 663 106"> ... </svg>

    Made:

     // Корректно отображается в explorer <svg xmlns="http://www.w3.org/2000/svg" width="663" height="106" viewBox="0 0 663 106"> ... </svg>

    Voila! Slightly biased (not yet corrected), but the scale is correct. enter image description here