div浮动层ie6历险

近来做个web，页面上希望实现类似照片轮播的效果，这个用flash做会比较酷，但因为会用到flex，这里没人会，只好选择用ajax实现。

 

大家知道，通过设置css的position:absolute，可以实现页面中某一部分浮动的效果，如：

 

 

这个200*100px的方块采用了绝对定位，左和上的边距都是100px，这个边距是相对它的上一次父层来说的。也就是说，不管在这个父层内还有没有其它元素，这个方块都会在它指定的位置上呆着。当然，设置z-index还能控制其在页面上的里外顺序，决定它是否会被别人挡住。

 

最后做出来的效果还是比较满意，至少在我的电脑上测试起来是这样，我一般只测试ie和firefox，但是，发给用户测试时问题还是来了。用户反应这个方块会比正常的位置向右偏，他说自己所用的是浏览器是360。不过，这次不能怪360，因为它只是一只披着羊皮的狼，我知道问题应该出在ie6上。我的电脑已经升级到ie8了，但很多用户还没有。在用ie8进行测试时，它有个兼容性按钮，可以看到在低版本下的效果，果然不堪入目。但是，问题出在哪里呢？这还真是让人头痛，web程序员最害怕的就是这个东西，浏览器版本越多越怕，很多时候一头雾水，不知道从何下手。我一般都是把这类问题留到最后解决，通常都是靠着一个信念：总会有办法的。

 

当然，又是当然，少不了用百度google了一下，还是能找到一些提示，反正各种关键字轮着试。大致明白是ie6的一个自身的缺陷，就是在绝对定位时，如果上级层设置了padding等样式，则其起点就会受到影响，举个例子：

 

  

 

本来我们想让里面那个层应该离父层的左边100px，但在ie6下会离开有200px，多了100px，也就是它定位的起点会受到父层的padding-left:100px这个样式的影响。不过，在我的页面中，并没有用到padding，而是类似下面这样：

 

  

 

这又是怎么回事儿呢？我百思不得其解，都差点放弃准备转去学flex了，偶然一个发现顿时柳岸花明又一村。原来，项目中有类似的页面，其中的层并不会移位，我仔细对比，发现其中的玄机，就在text-align上。在正常显示的页面中是text-align:left，而异常的页面中为text-align:center。原来，如果设置成居中的话，ie6下浮动层的起点就会以父层的中点计算。

 

kao，这么难解决的问题都能被我搞定，我还真是有点儿佩服自己：）

 

********