css - Firefox 图像 Sprite 显示替代文本

Question

在 Web 应用程序中，我使用具有替代文本的图像 Sprite 。但在 Firefox 中，只有实际的替代文本会覆盖屏幕上的图像。

<img width="36" height="36" class="step1Current" title="Step 1" alt="Quote step one image">

它的类是:

.step1Current{
    background: url(../images/progress-sprites.png) no-repeat;  
    background-position: 0px 0px ;
    width: 36px;
    height: 36px;   
}

因此图像上覆盖有文本“引用步骤一图像”。

Answer 1

你不应该在 img 标签上使用背景。

如果你不指定 src="" 天知道会发生什么，alt 应该会出现。

内联 Sprite :http://css-tricks.com/css-sprites-with-inline-images/

现场演示:http://css-tricks.com/examples/CSSClip/

关键是 clip 属性，它一直适用于 IE6。