参考

Question

我在代码中使用了视频标记

<div class="mask">                                   
  <video class="circleVideo" id="video" width="423" height="423" autoplay="autoplay" style="border-radius: 220px;">
    <source src="videoconv/loginVideo.mp4" type="video/mp4" />
    <source src="videoconv/loginVideo.ogv" type="video/ogg">
    <source src="videoconv/loginVideo.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</div>

这里我为视频和div添加了一些Css。

        border-radius: 220px;
        height: 423px;
        width: 423px;
        overflow: hidden;
        position: absolute;
        top: 198px;
        right: -416px;
        background-color: rgba(255,163,25,0.3);
        -webkit-border-radius: 220px;
        -moz-border-radius: 220px;
        -ms-border-radius: 220px;
        -o-border-radius: 220px;
        /*clip: rect(1px, 423px, 423px, 0);*/
        -khtml-border-radius: 220px;
        -webkit-mask-image: url(../images/mask_img.png);
    }


    .circleVideo {
        width: 582px;
        border-radius: 220px;
        margin-top: -33px;
        margin-left: -74px;
        height: 488px;
    }

这是我添加的js，它允许我在IE中看到这个：

html5media.min.js

我无法将css应用于IE中的视频。它在chrome和firefox以及opera中正常工作。

我还应该做些什么，以便视频也出现在IE中的圆圈中？

Answer 1

使用border-radius可能会让IE变得棘手，看起来某人有类似的问题：here

在IE9之前有一些CSS3兼容性的解决方法，很多人会建议使用Modenizer - 一种非常简单易用的方法CSS3Pie

Answer 2

按照@reto的推荐检查IE版本。

请注意，早期版本的IE中不存在border-radius。如果您希望支持IE，可能必须编写针对早期版本IE的样式。
检查IE中的元素以确保您正在样式化的元素确实存在。

根据您使用的IE版本的年龄，我建议采用渐进式增强¹方法。

参考

渐进增强：http://en.wikipedia.org/wiki/Progressive_enhancement

IE中的HTML5视频标签

2 个答案:

参考