Question

该网站为here。单击菜单中的按钮时，Internet Explorer将隐藏图标。这不是其他浏览器中的行为。该图标是<a>的背景，可以点击它。有没有办法在点击时显示图标？

仅使用CSS是否可以在点击<a>时将过滤器应用于<li>？

这样，<a>的背景图标将被保留。

Answer 1

我们之所以看到这个错误，是因为它在图标上绘制了渐变，因此作为临时解决方法，这里修复了IE。如果您有最后一个条件标记，请将透明颜色设置为endColorStr。

<!--[if IE]><style type="text/css">
#menu li a:active {
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#000000ff')";
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#000000ff');
    padding: 39px 0px 2px 0px;
    margin-bottom:1px;
}
</style><![EndIf]-->

Answer 2

我找到了解决问题的方法。替换此代码：

<!--[if IE]><style type="text/css">
#menu li a:active {
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#ccff66')";
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#ccff66');
    padding: 39px 0px 2px 0px;
    margin-bottom:1px;
}
</style><![EndIf]-->

使用：

<!--[if IE]><style type="text/css">
#menu li a:active {
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#ccff66') progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://lh5.googleusercontent.com/_qvhVKLFln2A/TZ8U5OiFLlI/AAAAAAAAHqg/7OQqVItePoo/menu_icon.png')";
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#ccff66') progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://lh5.googleusercontent.com/_qvhVKLFln2A/TZ8U5OiFLlI/AAAAAAAAHqg/7OQqVItePoo/menu_icon.png');

    padding: 39px 0px 2px 0px;
    margin-bottom:1px;
}
</style><![EndIf]-->

您将在每个链接中获得相同的背景图像。解决方案是为每个链接提供单独的图像：信息，聊天，......

Answer 3

您是否尝试使用相同背景设置“a：active”或“a：visited”？

W3Schools CSS :active Selector

如何防止IE过滤器覆盖背景图像

3 个答案: