Firefox文本不透明背景问题

Question

看一下Firefox的截图：

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

其他浏览器工作正常 - 甚至是IE6，以其自己可怜的最小方式 - 但Firefox在文本背后绘制了一个奇怪的黑盒子。它不是填充整个文本区域，而是填充实际字符的剪辑。

我知道firefox能够做透明度，所以任何想法是什么引发了这种奇怪的行为？

---

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

我在Linux上使用Firefox 3.6.9。该页面使用jQuery和jQuery Tools来处理各种不透明度的事情，但上面的小提示显示这不会导致问题。

Answer 1

您尝试使用背景颜色而不是不透明度：rgba（）？您可以单独控制背景颜色的不透明度。你仍然需要使用IE的不透明度

Answer 2

对于不透明度问题：

http://davidwalsh.name/css-opacity

.show-50 { -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; }

或者更好：

.show-50 {
-moz-opacity: 0.5 !important; 
-webkit-opacity: 0.5!important; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; 
filter: alpha(opacity=50) !important;
opacity: 0.5 !important;}

了解详情：http://www.robarspages.ca/web-development/css-opacity-for-all-browsers-cross-browser-compatible/#ixzz13MngpmvC