兼容主流浏览器的背景遮盖和居中浮动层的CSS样式

zhangpeng 2011-09-07

html, body
{
    height: 100%;
    margin: 0px;
    font-size: 12px;
}
 
.mydiv
{
    background: #f1f1f1;
    padding: 15px 30px;
    border: 5px solid #ccc;
    z-index: 99;
    left: 50%; /*FF IE7*/
    top: 50%; /*FF IE7*/
    margin-left: -150px !important; /*FF IE7 该值为本身宽的一半 */
    margin-top: -60px !important; /*FF IE7 该值为本身高的一半*/
    margin-top: 0px;
    position: fixed !important; /*FF IE7*/
    position: absolute; /*IE6*/
    _top: expression(eval(document.compatMode &&
    document.compatMode=='CSS1Compat') ?
    documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
    document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/
}
 
.bg
{
    background-color: #ccc;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0; /*FF IE7*/
    filter: alpha(opacity=50); /*IE*/
    opacity: 0.5; /*FF*/
    z-index: 1;
    position: fixed !important; /*FF IE7*/
    position: absolute; /*IE6*/
    _top: expression(eval(document.compatMode &&
    document.compatMode=='CSS1Compat') ?
    documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
    document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/
}
 

相关推荐