html - Firefox 文本不透明背景问题

Question

看看这个来自 Firefox 的截图:

左右两个箭头是半透明文本，不透明度为 20% 和 80%。文本应用了文本阴影样式。它们背后的图像也应用了不同的不透明度。

其他浏览器工作正常 - 甚至是 IE6，以其自己可悲的最小方式 - 但 Firefox 在文本后面绘制了一个奇怪的黑框。它没有填充全文区域，只是实际字符的剪辑。

我知道 firefox 能够实现透明度，所以知道是什么触发了这种奇怪的行为吗？

---

更新: here's a simple JSFiddle showing the effect .删除 opacity 规则，问题就消失了。

我在 Linux 上使用 Firefox 3.6.9。该页面使用 jQuery 和 jQuery 工具来处理各种不透明褪色问题，但正如上面的 fiddle 所示，这不会导致问题。

Answer 1

你试过 background-color:rgba() 而不是 opacity 吗？您可以单独控制背景颜色的不透明度。您仍然需要为 IE 使用不透明度