CSS错误还是IE兼容性问题？

在主菜单下拉列表中遇到意外的奇怪图标，其中包含附加屏幕截图中圈出的图像。IE8、IE9、IE10仍然存在此问题。谢天谢地，不是IE 11

兼容性问题或css错误？或者它是否有doctype声明？我的doctype声明读作

我正在使用这个的一个修改版本

下拉列表中的每个菜单项都是：

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

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

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

这个链接应该会有帮助

直接设置图像的src更为可取。
作为补充说明，您应该始终在图像上包含src。它是基于HTML标准的IMG标记的必需属性

:

src属性必须存在，并且必须包含一个有效的非空URL，该URL可能由引用非交互式（可选动画）图像资源的空格包围，该图像资源既没有分页也没有脚本

--很抱歉，这将是一个评论，但我还没有声誉来发表这些评论。
不是doctype声明。将
放在文件的第一行，前面没有任何字符。您也不应该使用
X-UA-Compatible
降级IE>9，它可以被删除。您的HTML中没有定义图像。。。