1

我定义了两种样式：

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 和 chrome 中效果很好，但不是 ie（我测试了 ie10 和 ie8）。IE 显示图像（是不是简单的渐变），也显示了正方形的 img 缺失框（见下文）。任何想法如何解决这一问题？提前致谢。

在此处输入图像描述

4

3 回答 3

3

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

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

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

于 2013-11-07T08:06:07.337 回答
2

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

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

于 2013-11-07T08:24:33.910 回答
2

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

支持包括 IE6-10 在内的所有浏览器

于 2013-11-07T08:02:50.833 回答