Css elemento di sovrapposizione non invisibile

Question

See: http://schhh.dk/frivilligraadet/

La scatola con i video in basso sono, in IE8, visualizzata come:

in realtà ho provato a fare una jsfiddle, ma qui non c'è problema: 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

E 'perché è necessario impostare "larghezza" e "display: block" per span.ytb-video Nel vostro caso la larghezza dovrebbe essere 230px

http://screencast.com/t/U2QPWvszGN

Answer 2

è un problema con trasparenza un IE ho paura. Le configurazioni e le osservazioni in questo link può aiutare a uscire: http://www.jacklmoore.com/notes/ie-transparency-problems

Answer 3

Guardandolo negli strumenti dev, per qualche motivo la regola del filtro e la regola della larghezza si combinano in uno. Anche se sono separati da un punto e virgola (vedi screenshot), forse la combinazione è "rotta". e questo è il motivo per cui l'elemento non ha larghezza.

Dal CSS non posso dire subito perché IE8 interpreterà in questo modo - non sono nemmeno consecutivi nel file! Forse prova a riordinarli per vedere se questo fa la differenza. O modificarlo per

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

che è la versione migliore per IE8 comunque.