css - 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-video に「幅」と「表示: ブロック」を設定する必要があるためです。この場合、幅は 230px にする必要があります。

http://screencast.com/t/U2QPWvszGN

Answer 2

Looking at it in dev tools, for some reason the filter rule and width rule are combining into one. Even though they are separated by a semicolon (see screenshot), maybe the combination is "broken." and this is why the element has no width.

From the CSS I can't tell right away why IE8 would be interpreting them this way -- they're not even consecutive in the file! Maybe just try reordering them to see if that makes a difference. Or change it to

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

which is the better version for IE8 anyway.

Answer 3

私が恐れているIEの透明性の問題です。このリンクの構成とヒントが役立ちます: http://www.jacklmoore.com/notes/ie-transparency-problems