开发者

div not centering in compatibility mode

开发者 https://www.devze.com 2023-02-08 19:57 出处：网络

When IE8 is \"normal\" standards compliant mode the html and css belo开发者_如何学Gow does what it should and properly centers the red div. However in compatibility mode it does not get centered. Anyo

相关专题：compatibility css

When IE8 is "normal" standards compliant mode the html and css belo开发者_如何学Gow does what it should and properly centers the red div. However in compatibility mode it does not get centered. Anyone here able to explain why and suggest an alternative?

<html>
   <head><title>test</title></head>
<body>
    <div 
        style="position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        top: 0;
        width: 900px;
        background-color: red"
    >
        test
    </div>
</body>
</html>

to make it working without the doctype just do this way:

style="position: absolute;
        margin-left: -450px;
        left: 50%;
        top: 0;
        width: 900px;
        background-color: red"

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    background: navy;
}
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>