Css оверлей элемент не является невидимым

Question

См: http://schhh.dk/frivilligraadet/

Коробка с видео в нижней части находятся в ie8, отображается как:

Я действительно пытался сделать jsfiddle, но здесь нет проблема: http://jsfiddle.net/q5T8Y/7/

.view-youtube-videoer .views-field-field-video .ytb-play { 
    position: absolute; 
    display: block; 
    width: 230px; 
    height: 128px; 
    background: transparent url('http://schhh.dk/frivilligraadet/sites/all/themes/frivilligraadet/images/play.png') no-repeat 50% 50%; 
    opacity: 0.7; 
    filter:alpha(opacity=70); 
} 

Answer 1

Это потому, что вам нужно установить «ширину» и «дисплей: блок» для span.ytb-видео В вашей ширине корпуса должен быть 230px

http://screencast.com/t/U2QPWvszGN

Answer 2

Является ли проблема с прозрачностью ИЭ, я боюсь. Конфигурации и подсказки в этой связи могут помочь вам: http://www.jacklmoore.com/notes/ie-transparency-problems

Answer 3

Рассматривая его в инструментах разработчика, по какой-либо причине правило фильтра и правило ширины объединяются в одно. Даже если они разделены точкой с запятой (см. Снимок экрана), возможно, комбинация «сломана». и поэтому элемент не имеет ширины.

Из CSS я не могу сразу сказать, почему IE8 будет их интерпретировать таким образом - они даже не последовательны в файле! Может быть, просто попробуйте переупорядочить их, чтобы узнать, имеет ли это значение. Или изменить его на

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 

, который является лучшей версией для IE8 в любом случае.