Question

当IE8是“正常”标准兼容模式时，下面的html和css会做它应该做的事情，并正确地将红色div放在中心位置。但是在兼容模式下，它不会居中。这里的任何人都能解释原因并提出替代方案吗？

<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>

Answer 1

<!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>

Answer 2

让它在没有doctype的情况下工作只是这样：

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

div不以兼容模式为中心

2 个答案: