Firefox Sprite Sheet 图像未显示

Question

我正在尝试创建一个带有表情符号的聊天室。当用户在聊天室中键入 :) 等表情符号时，CSS 会从 sprite 表中取出正确的图像。但我的代码似乎只适用于 Opera 和 IE（奇怪的组合）。它不会在 Firefox 或 Chrome 中显示（如果您设法精确定位图像应该在的位置，您可以找到用作替代背景 URL 的图像 blank.gif）。有谁知道在 Firefox/Chrome 中可能导致这种情况的原因是什么？

网站：ttony21.byethost24.com

相关CSS：

image.emo {
  width:19px;
  height:19px;
}
image#smile {
  background:url(img/diceSprite.png) 0 0;
}
image#bigsmile {
  background:url(img/diceSprite.png) -19px 0;
}
etc...

相关 HTML：

<img class="emo" id = "smile" src="img/blank.gif" width="1" height="1" alt=":)" title=":)" />
<img class="emo" id = "bigsmile" src="img/blank.gif" width="1" height="1" alt=":D" title=":D" />
etc...

Answer 1

改变

image.emo {
  width:19px;
  height:19px;
}

到

img.emo {
  width:19px;
  height:19px;
}

和其他人遵循类似的模式。元素选择器是img，不是image