背景图像css不工作在IE11

Question

I have a WordPress site in which we are replacing menu links with a background image. Here is an example of the 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 obviously wrong or missing to work with IE11?

It works just great in chrome and firefox, but does not work at all in IE11. I'm not very experienced with IE cross browser support, so it's likely that anything will help.

Thanks!

Answer 1

IE11 is inheriting the visibility from the a to their ::before .

I'd recomend you not to use that rule and use:

overflow: hidden;
text-indent: -1000px;
height: 20px;
display: block;

instead. This way you are hidding the text (what I think that is what you really want to do) and not affecting the background.