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设置“width”和“display：block” 在你的情况下，宽度应为230px

http://screencast.com/t/U2QPWvszGN

Answer 2

我害怕IE的透明度问题。此链接中的配置和提示可以帮助您：http://www.jacklmoore.com/notes/ie-transparency-problems

Answer 3

在开发工具中查看它，由于某种原因，过滤规则和宽度规则合并为一。即使它们被分号分隔（见截图），也许这种组合“被打破”。这就是元素没有宽度的原因。

从CSS我无法立刻知道为什么IE8会以这种方式解释它们 - 它们在文件中甚至不连续！也许只是尝试重新排序它们，看看是否有所作为。或者将其更改为

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

无论如何，这是IE8的更好版本。