• DIV水平垂直居中的CSS兼容写法


    DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7、IE8、IE9。

    在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题。

    示例如下: 

    <!DOCTYPE html>
    <html>
    <head>
        <title>DIV水平垂直居中 </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body {
                font-size: 12px;
                font-family: tahoma;
                margin: 10px;
                padding:0;
            }
    
            .box {
                border: 1px solid #f09;
                background-color: #fcf;
                 520px;
                height: 360px;
                position: relative;
                overflow: hidden;
            }
    
            .sub-box {
                position: absolute;
                top: 50%;
                left: 50%;
                margin: auto;
                -webkit-transform: translate(-50%,-50%);
                -ms-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
            }
    
            .con {
                *position: relative;   /* 星号兼容 IE6/IE6 */
                *top: -50%;
                *left: -50%;
                margin: -50% 50% -50% -50% ;   /*兼容IE8(IE9也受影响,在下面处理掉IE9)*/
                border: solid 1px #f00;
            }
            :root .con {
                margin: auto;  /*兼容处理IE9*/
            }
        </style>
    </head>
    <body>
        <div id="ver"></div>
        <div class="box">
            <div class="sub-box">
                <div class="con">
                    DIV垂直居中<br />
                    水平居中、垂直居中<br />
                    水平居中、垂直居中<br />
                    水平居中、垂直居中<br />
                    水平居中、垂直居中<br />
                    水平居中、垂直居中<br />
                    水平居中、垂直居中
                </div>
            </div>
        </div>
    </body>
    </html>
    <script type="text/javascript">
      //显示浏览器版本
        document.getElementById('ver').innerHTML = navigator.userAgent;
    </script>
    

      

  • 相关阅读:
    LuaJIT 之 FFI
    rtmp时间戳问题导致的丢帧,帧率显示错误
    c# 调用 c++的 dll 中关于 char*传入传出参数
    “Microsoft”中不存在类型或命名空间名称“Office”(是否缺少程序集引用?)
    udp,select超时和recvfrom收不到数据原因
    rtmpdump应用在window中
    Win7下安装openssl
    debug模式不报错,release模式报错
    qt 断点无效
    http协议 c++ 接收
  • 原文地址:https://www.cnblogs.com/oukunqing/p/6265236.html
Copyright © 2020-2023  润新知