0

I can't see some icons on my html using IE11. This is the css code for the icon

.icon_sms:before {
    display: block;
    content: '';
    height: 8em;
    width: 8em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-image:
        url([...]);
}

I've tried also with display: inline-block, but it doesn't work either.

Also with no-cache property on html head

And also with <meta http-equiv="X-UA-Compatible" content="IE=edge"> on first property on head

Any suggestion?

Thank you so much

Best regards

JLopez
  • 73
  • 11

2 Answers2

0

I think you can not use pseudoelements in IE11. To know what technology you can use in each browser, i recommend the web caniuse. It's very clear with a lot of technologies.

You can see the browsers that accept the before pseudoelement in this link. I hope that you will be useful.

Sones1
  • 123
  • 10
0

According to your description and the code you provided, I did a simple test and found that it works fine in IE11.

A simple test:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style>
        .icon_sms:before {
            display: block;
            clear: both;
            content: '';
            height: 40em;
            width: 40em;
            vertical-align: middle;
            background-repeat: no-repeat;
            background-image: url(https://i.stack.imgur.com/UzYKM.gif);
        }
    </style>
</head>
<body>
    <div class="icon_sms" style="border:1px solid red">some text</div>
</body>
</html>

Because you haven't posted the image url and any html code yet. I guess it may be because the size in the before style is not large enough to display the image. Try to modify the height and width in the example to 8em, it will not be displayed.

If you can post relevant complete examples, it will help solve the problem, thank you for your understanding.

Xudong Peng
  • 1,463
  • 1
  • 4
  • 9
  • Hi Xudong! Thank you very much for your response. The bckg-image is an svg/xml like this: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='overflow: visible;position: absolute;left: -15px;top: -5px;'%3E%3Cpath .../%3E%3C/svg%3E"); I've tried with base64 string instead of encode xml but it doesn't work – JLopez Jun 18 '21 at 09:20
  • Also, I've tested my css with that url image but it doesn't work either. I can't see the icon. Maybe it's something about the before on the css file – JLopez Jun 18 '21 at 09:38
  • @JLopez do you see my answer? – Sones1 Jun 18 '21 at 15:19
  • Hi @JLopez, Have you checked the browser console? I used the url you provided and got the error message: Illegal qualified name character. A similar case: [SVG data image not working as a background-image in a psuedo element](https://stackoverflow.com/questions/30733607/svg-data-image-not-working-as-a-background-image-in-a-psuedo-element) So I am not sure if you converted the format correctly, and I tried to use the base64 format, it also works normally, you can use some tools to easily get base64 data., for example: [Image to Base64](https://codebeautify.org/image-to-base64-converter) – Xudong Peng Jun 21 '21 at 01:59
  • Hi all! Thank you very much for your responses. The point was the header of the svg file, there was some elements that doesn't work for IE11. So I deleted this headers and now I can see the icon correctly! – JLopez Jul 15 '21 at 10:23
  • I am glad to hear that your problem has been resolved. You can put the solution into an answer and mark it as an accepted answer. It can help other community members in future in similar kind of issues. Thanks for your understanding. – Xudong Peng Jul 16 '21 at 01:57