Internet Explorer 修复定位 youtube 嵌入问题

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 等旧版浏览器不支持它。