带有CSS背景图像的IMG标签 - ie10显示缺少img框

Question

我定义了两种样式：

img.feedback-sprite-22{
    display:block;
    background:url(../img/feedback-sprite-22.png) 0px 0px scroll;
    height:22px;
    border:0 !important; 
    padding:0; 
    margin:0 !important;
    z-index:0;
}

img.feedback-sprite-22:hover{
    background-position:0px -22px;
}

img.fb {
    display:inline; 
    margin:auto 0; 
    border: none !important; 
    vertical-align: middle;
}

我像这样显示图像：

<img class='fb feedback-sprite-22' height='22' width='65'>

在ff＆amp;铬但不是（我已经测试了ie10和ie8）。 IE显示图像（它是一个简单的渐变），但也显示方形img缺失框（见下文）。任何想法如何解决这一问题？提前致谢。

Answer 1

因为您的 img 标记中没有 src ，这是必需的。

使用 div <div class="fb feedback-sprite-22"></div>代替 img 。并在css中定义宽度和高度。如果你真的想用css ...

来做

但是在我看来你应该使用清晰的img - 比如<img src="/img/feedback-sprite-22.png" alt="">而不是css中的背景来代替这样的元素。

Answer 2

如果它只是一个渐变，为什么不使用CSS，渐变？
http://www.colorzilla.com/gradient-editor/

支持包括IE6-10在内的每一个浏览器

Answer 3

所以答案，我发现，正如Choinek指出的那样，IMG显然必须为IE定义'src'。我把它分配给blank.gif，一切都很好。由于我已经在网站上使用了blank.gif，因此不会加载另一个图像。

但是，我真的很喜欢使用CSS渐变的想法。这会减少图像的数量（总是很好）。