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);
}

- jborch

Answer 1

因为你需要为span.ytb-video设置“宽度”和“display：block”。在你的情况下，宽度应该是230像素。 http://screencast.com/t/U2QPWvszGN

- Eugene Kuzmin

Answer 2

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

从CSS中，我无法立即确定IE8为什么会以这种方式解释它们--它们甚至不是在文件中顺序排列的！也许只要尝试重新排序它们，看看是否有所不同。或者将其更改为

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

无论如何，哪个版本对IE8更好。

- Sean Redmond

Answer 3

抱歉，透明度的问题是IE浏览器的问题。这个链接中的配置和提示可以帮助您解决问题：http://www.jacklmoore.com/notes/ie-transparency-problems

- wandarkaf