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

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

        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*/
        }
posted @ 2011-08-29 21:15  ascrat  阅读(431)  评论(0编辑  收藏  举报