首先说说页面居中的实现方式,排除IE5.5,可以使用下面的方法
body { width : 1002px ; margin : 0 auto ; } //页面居中
或者这样:
.Header,.Main,.Footer { clear : both ; width : 1002px ; margin : 0 auto ; } //页面居中
两种方法在效果上是一样的,但是今天遇到了这样一个问题:
- 我使用第一种方法让页面居中;
- 调试环境为Internet Explorer 6.0 (6.00.2900.5512) (32-bit);
- 在新闻列表页单击某一条新闻,在新窗口打开,显示正常;
- 但IE6默认的打开方式不是窗口最大化,然后再去单击“最大化”按钮;
- 奇迹出现了“.Header”和“.Footer”跑到左边去了,而“.Main”还在中间,经过简单测试,得出的结论是body元素没有居中,因为“.Main”里面做了相对定位的元素也移到了相对body的位置,而不是“.Main”(不知道这样理解对不对);
- 当经过不定时的时间或者鼠标移动到“.Header”上到时候,页面立即恢复正常;
截图:
可以看到页头部分的变化,下面看页尾的变化:
红色线表示的是页面的左边的正确位置,看得出“.Header”和“.Footer”都超出了这条线。既然是IE6的问题,不会IE7也有问题吧(因为这个问题在IETester下没办法测试,因为IETester会自动最大化窗口,效果一闪就过去了),结果是IE7更厉害,不但“飞”得跟IE6一样,而且比IE6还顽固,鼠标移上去都不恢复,非要选择文本才能恢复;再去试试IE8吧,幸好IE8没有让人感觉到“飞”的感觉,但是仍旧看到了页面最大化后,有从左边飞到居中的位置的痕迹,难不成IE8不但没有解决这个问题,还把它做成了动画??这个就需要高人慢慢的研究了。
因为样式写了很多,还没有来得及分离,不排除是自身样式冲突造成的。
虽然至此位置还是没弄明白具体原因,但是至少有解决方法:
第一种:使用文章开始说的第二种居中的方法,即
.Header,.Main,.Footer { clear : both ; width : 1002px ; margin : 0 auto ; } //页面居中
可以避免这种错误,为什么我也不知道。
第二种:只是一种思路,考虑有可能是IE的Layout造成的,但是至今没找到解决办法。