Отображение слайдера в разных браузерах

[nyash]

Здравствуйте.

Прикрутила flex слайдер на сайт, пример оформления изначально был нагло стырен отсюда и переделан под "вот как вон там" (как там уже потеряно, но получилось похоже), после чего встала проблема, что в Mozilla Firefox блоки под текстом через 3 слайда были не полупрозрачные, а черные. Это получилось из-за того, что полупрозрачные блоки постепенно наслаиваются друг на друга.

Весь css можно посмотреть тут.

Часть, которая отвечает за проблемные блоки подписи:

.flexslider .slides div  {display: block;position: absolute;bottom: 0;padding: 8px 5px;margin: 0 0 10px 0;width: 100%;background: #000;background: rgba(0,0,0,.6);}.flexslider .slides div span {padding: 0 10px;font-size: 16px;text-shadow: 0px 1px 0px rgba(0,0,0,.8);z-index: 1;margin: 0;color:#e3dcd1;}

В html код слайдера выглядит так:

<div class="flex-container">	<div class="flexslider">		<ul class="slides">			<li>				<img src="slide1.jpg"/>				<div><span>Подпись1</span></div>			</li>			<li>				<img src="slide2.jpg"/>				<div><span>Подпись2</span></div>			</li>			<li>				<img src="slide3.jpg"/>				<div><span>Подпись3</span></div>			</li>		</ul>	</div></div>

Я добавляла стиль для полупрозрачности и ставила его только на верхнем блоке, но тогда наоборот, в mozilla все ок, а в chrome и opera у первого слайда есть полупрозрачный фон надписи, а у последующих - нет.

Игры с z-index приводили к тому, что либо полупрозрачность есть везде, но поверх надписи (кроме одного слайда, где прописан стиль с полупрозрачностью), либо к тому, что в mozilla все ок, а в chrome и opera фон надписи есть только на одном слайде.

Еще была идея поставить сверху полупрозрачный блок единый для всего слайдера, но я не рассчитала, что он полупрозрачно прикроет все подписи к слайдам.

Если нужно, могу восстановить и выложить коды своих экспериментов.

Премного благодарна тем, кто хотя бы дочитал до конца это сообщение, еще более благодарна буду тому, кто подскажет, как можно решить эту проблему.