iframe - Internet Explorer の固定ポジショニング youtube 埋め込みの問題

Question

こんにちは、画面の下部にマウスを置くと div が表示されるように、固定 100% の幅/高さの youtube 埋め込みを作成しようとしています。現在、これは 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 などの古いブラウザではサポートされません。