ie关于居中显示的bug

来源：互联网发布：淘宝卖家收藏店铺指令编辑：程序博客网时间：2024/06/07 02:19

代码：

<HTML>
    <HEAD>
        <STYLE>
            .center
            {
                margin: auto;
                width: 400px;
            }
            #header
            {
                text-align: center;
            }
            .box0
            {
                position: absolute;
                width: 400px;
                height: 50px;
                background: #ddddff;
            }
            .box1
            {
                position: absolute;
                width: 400px;
                height: 50px;
                background: #ddffdd;
            }
        </STYLE>
    </HEAD>
    <BODY>
        <DIV id="header">
            <DIV class="center">
                <DIV class="box0">hello</DIV>
                <DIV class="box1">hello</DIV>
            </DIV>
        </DIV>
    </BODY>
</HTML>

上面的代码，在大部分浏览器中，都能居中显示box0和box1，其中box0会被box1覆盖，但是在ie上显示却会出问题，box0和box1会向右偏。如果把box0和box1的“position: absolute”去掉，box0和box1都会居中，但box1就不能把box0覆盖掉；如果把header的“ text-align: center”去掉，box0和box1就会向左偏。

研究了很久，终于找到了解决方法，就是加一个空盒子“<DIV style="WIDTH: auto; HEIGHT: 0px"></DIV>”（注意，空盒子中的“WIDTH: auto”是必须的）。把空盒子加在box0和box1之间，box0居中，box1继续右偏；把空盒子加在box1之后，则box0和box1都能居中。

经过反复试验，“text-align: center”，“position: absolute”和空盒子都会影响ie居中显示（不排除还有其他属性），感兴趣的读者可自己调试。