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

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

Answer 3

在开发工具中查看它，由于某种原因，过滤规则和宽度规则合二为一。即使它们用分号分隔（参见屏幕截图），也可能组合“损坏”。这就是元素没有宽度的原因。

从 CSS 中我无法立即说出为什么 IE8 会以这种方式解释它们——它们在文件中甚至不是连续的！也许只是尝试重新排序它们，看看是否有区别。或将其更改为

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

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