html - 背景图像 css 在 IE11 中不起作用

Question

我有一个 WordPress 网站，我们在其中用背景图片替换菜单链接。这是其中一个菜单项的 CSS 示例。

  #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");
  }

使用 IE11 时是否存在明显错误或缺失的地方？

它在 chrome 和 firefox 中工作得很好，但在 IE11 中根本不起作用。我对 IE 跨浏览器支持不是很有经验，所以可能有任何帮助。

谢谢!

Answer 1

IE11 将 visibility 从 a 继承到它们的 ::before。

我建议您不要使用该规则并使用:

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

相反。这样你就隐藏了文本(我认为这是你真正想要做的)而不影响背景。