您的位置：首页 > 其它

ie关于居中显示的bug

2011-01-10 14:54 260 查看
代码：

<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居中显示（不排除还有其他属性），感兴趣的读者可自己调试。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航