Фоновая проблема непрозрачности текста в Firefox

Question

Посмотрите на этот скриншот из Firefox:

Две стрелки влево и вправо представляют собой полупрозрачный текст с непрозрачностью 20% и 80%. К тексту применяется стиль текста-тени. Изображения позади них также имеют различную непрозрачность.

Другие браузеры работают нормально - даже IE6, в своей жалкой минимальной манере - но Firefox рисует странный черный прямоугольник за текстом. Он не заполняет всю текстовую область, просто клип реальных символов.

Я знаю, что Firefox способен на прозрачность, так что есть идеи, что вызывает это странное поведение?

---

Обновление: вот простой JSFiddle, показывающий эффект . Удалите правило opacity, и проблема исчезнет.

Я использую Firefox 3.6.9 в Linux. На странице используются jQuery и jQuery Tools для различных мерцаний, связанных с непрозрачностью, но, как показано выше, это не вызывает проблемы.

Answer 1

Вместо непрозрачности вы пробовали background-color: 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