CSS 错误或 IE 兼容性问题？

Question

在主菜单下拉菜单中遇到一个意想不到的奇怪图标，其中包含所附屏幕截图中圈出的图像。此问题在 IE 8、IE 9、IE 10 中仍然存在。谢天谢地，IE 11 没有。Link to the website

兼容性问题或 css 错误？或者它是否有任何带有 doctype 声明的东西？我的文档类型声明读作 <meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1">

我正在使用这个 drop-down plugin 的修改版本.

下拉菜单中的每个菜单项是:

<li id="li1" class="li-img">
    <a class="alink" href="somelink.html"></a>
    <img class="img-fade">
</li>


.li-img{
color: #ffffff;
font-weight: bold;
width: 25%;
height: 80px;
margin: 0px;
}

.alink{
position: absolute;
top: 10px;
left: 10px;
opacity: 1 !important;
z-index: 1000;
}

.img-fade{
-webkit-transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out;
-ms-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
position: absolute;
opacity: 1;
cursor: pointer;
}

.img-fade:hover{
opacity: 0.4;
}

#li1 img{
content:url(../img/dd/private-bank.jpg);
width: 232px;
clip: rect(0px, 232px, 80px, 0px);
}

Answer 1

这是一个兼容性问题。 CSS 内容在低于 11 的 IE 版本中无法正确呈现。

您应该尝试使用条件 css，而不是使用 IE 的 css 设置该图像的内容。

此链接应该会有帮助。 http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ .

直接设置图片的src会更可取。