css - Firefox Sprite 表图像不显示

Question

我正在尝试创建一个带有表情符号的聊天室。当用户在聊天室中键入诸如 :) 之类的表情符号时，CSS 会从 sprite 表中取出正确的图像。但我的代码似乎只适用于 Opera 和 IE(奇怪的组合)。它不会在 Firefox 或 Chrome 中显示(如果您设法精确地确定图像应该在的位置，您可以找到图像 blank.gif，它用作放置背景 url 的替代品)。有谁知道在 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