Background css image not working in IE11
I have a WordPress site where we are replacing menu links with a background image. Below is an example css for one of the menu items.
#menu-item-3039{
width:30px;
height:20px;
border:none;
padding-right:0;
}
#menu-item-3039 a{
visibility:hidden;
}
#menu-item-3039 a::before{
visibility:visible;
display:block;
width:20px;
height:20px;
content:"";
background-size:20px 20px;
}
#menu-item-3039 a::before {
background-image:url("/wp-content/uploads/2015/05/moodle-icon.png");
}
Is there something very clearly wrong or missing to work with IE11?
It works fine in chrome and firefox, but doesn't work at all in IE11. I'm not very experienced with IE cross-browser support, so something will probably help.
Thank!
+3
source to share
1 answer
IE11 inherits visibility
from a to theirs ::before
.
I would recommend that you not use this rule and use:
overflow: hidden;
text-indent: -1000px;
height: 20px;
display: block;
instead of this. This way you highlight the text (which I think is what you really want) and not affect the background.
0
source to share