Question

您好我正在尝试创建一个固定的100％宽度/高度youtube嵌入，以便当您将鼠标悬停在屏幕底部下方时会显示div。现在，这适用于Chrome，Firefox，Opera12，Opera15，但不适用于IE10。请看下面的JSFiddle，看看我的意思。

http://jsfiddle.net/gQuRn/

以下是我的css

*{
    padding:0px;
    margin:0px;
}
body{
    width:100%;
    height:100%;

}

html{
    width:100%;
    height:100%;
}
iframe{
    position:fixed;
    top:0px;
    left:0px;
    z-index:0;
    height:100%;
    width:100%;
}

#bannercontainer{
    position:fixed;
    z-index:1;
    bottom:0px;
    left:0px;
    height:150px;
    width:100%;
    background:transparent;


}

#banner{
    width:70%;
    background-color:pink;
    height:150px;
    display:none;   
    margin:auto;
}

#bannercontainer:hover #banner{
    display:block;
}

Answer 1

IE10（甚至只是IE）无法处理background:transparent;。您应该使用background:rgba(0,0,0,0)，它的工作方式相同。虽然IE8等旧浏览器不支持它。

Answer 2

我已经多次看到这个问题，而且每次都让我感到沮丧。

本文非常好地解释了问题和解决方案： -

Fix Drop Down Menu Behind YouTube Videos

这解决了所有浏览器中的问题。

Internet Explorer固定定位youtube嵌入问题

2 个答案: