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

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
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.sstatic.net/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.

Improve this answer
6
  • 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='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
    Commented Jun 18, 2021 at 9: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
    Commented Jun 18, 2021 at 9:38
  • @JLopez do you see my answer?
    – Sones1
    Commented Jun 18, 2021 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 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
    – Xudong Peng
    Commented Jun 21, 2021 at 1: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
    Commented Jul 15, 2021 at 10:23

Not the answer you're looking for? Browse other questions tagged or ask your own question.