1

我在页面上有一个 html5 视频标签，带有 IE8 的 Flash 后备。视频通过 display:none 隐藏并附加到父“a”，直到按下播放按钮（图像）。此时视频元素被移动到父'b'（覆盖内的一个框），我调用jQuery的show（）。

在 Chrome、FF 和 Safari 上，视频显示。但是，在 IE9 和 IE8 上，视频不显示，但存在。意思是，我可以右键单击它应该在的位置，并将获得一个与视频相关的上下文菜单。如果我此时单击播放，视频将定期出现并播放。

让视频出现的另一种方法是更改​​视频元素的一些 css。例如，将 box-sizing 从原来的 (border-box) 更改为 content-box 将使视频出现，反之亦然。

尝试从该控制台执行此操作是可行的。另一方面，试图在我的脚本中做到这一点并没有。

这是视频元素的 css 及其继承的内容：

*, html > * { box-sizing: border-box; }
audio, canvas, video { display: inline-block; }
.center { text-align: center; }
#section1 #videobox .videoPlayer { cursor: pointer; }

#video {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 10003;
}

我猜这可能是一个奇怪的布局问题（我会说 hasLayout，但幸运的是我没有处理 IE6/7）。

更新 我已经设法在 jsfiddle 中复制了这个问题：http: //jsfiddle.net/e76x5/5/

4

1 回答 1

0

我遇到了类似的问题，我能做的就是删除视频高度的任何 css 声明，并在显示后使用 javascript 设置它。您可以检查IE9 HTML5 视频仅在缓存清除后可见

于 2013-04-08T15:32:25.267 回答