css - Firefox 图像精灵显示 alt 文本

Question

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

<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应该出现。

内联精灵：http ://css-tricks.com/css-sprites-with-inline-images/

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

关键是clip属性，它一直有效到 IE6。