使用margin:0 auto页面居中在IE中的问题
发布日期:2021-10-25 12:04:13 浏览次数:2 分类:技术文章

本文共 1091 字,大约阅读时间需要 3 分钟。

首先说说页面居中的实现方式,排除IE5.5,可以使用下面的方法

 
body
{
width
:
1002px
;
margin
:
0 auto
;
}
//页面居中

或者这样:

 
.Header,.Main,.Footer
{
clear
:
both
;
width
:
1002px
;
margin
:
0 auto
;
}
//页面居中

两种方法在效果上是一样的,但是今天遇到了这样一个问题:

  1. 我使用第一种方法让页面居中;
  2. 调试环境为Internet Explorer 6.0 (6.00.2900.5512) (32-bit);
  3. 在新闻列表页单击某一条新闻,在新窗口打开,显示正常;
  4. 但IE6默认的打开方式不是窗口最大化,然后再去单击“最大化”按钮;
  5. 奇迹出现了“.Header”和“.Footer”跑到左边去了,而“.Main”还在中间,经过简单测试,得出的结论是body元素没有居中,因为“.Main”里面做了相对定位的元素也移到了相对body的位置,而不是“.Main”(不知道这样理解对不对);
  6. 当经过不定时的时间或者鼠标移动到“.Header”上到时候,页面立即恢复正常;

截图:

2010060210544234.png

可以看到页头部分的变化,下面看页尾的变化:

2010060210584439.png

    红色线表示的是页面的左边的正确位置,看得出“.Header”和“.Footer”都超出了这条线。既然是IE6的问题,不会IE7也有问题吧(因为这个问题在IETester下没办法测试,因为IETester会自动最大化窗口,效果一闪就过去了),结果是IE7更厉害,不但“飞”得跟IE6一样,而且比IE6还顽固,鼠标移上去都不恢复,非要选择文本才能恢复;再去试试IE8吧,幸好IE8没有让人感觉到“飞”的感觉,但是仍旧看到了页面最大化后,有从左边飞到居中的位置的痕迹,难不成IE8不但没有解决这个问题,还把它做成了动画??这个就需要高人慢慢的研究了。

    因为样式写了很多,还没有来得及分离,不排除是自身样式冲突造成的。

 

虽然至此位置还是没弄明白具体原因,但是至少有解决方法:

第一种:使用文章开始说的第二种居中的方法,即

 
.Header,.Main,.Footer
{
clear
:
both
;
width
:
1002px
;
margin
:
0 auto
;
}
//页面居中

可以避免这种错误,为什么我也不知道。

第二种:只是一种思路,考虑有可能是IE的Layout造成的,但是至今没找到解决办法。

转载于:https://www.cnblogs.com/ydx2020/archive/2010/06/06/1752792.html

转载地址:https://blog.csdn.net/weixin_30908103/article/details/99401540 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:《Hive编程指南》问题
下一篇:从JavaBean到EJB

发表评论

最新留言

初次前来,多多关照!
[***.217.46.12]2024年04月25日 07时58分34秒