[ 登录注册 ]

HTML/CSS

div浮动层ie6历险

2016/08/12 15:09 [db:作者] 返回上一页

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

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

<div style=positon:absolute;width:200px;height:100px;padding-left:100px;padding-top:100px;></div>

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

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

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

<div style="margin-left:auto;margin-right:auto;width:1000px;padding-left:100px;">

   <div style="positon:absolute;width:200px;height:100px;padding-left:100px;padding-top:100px;"></div>

</div>

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

<div style="margin-left:auto;margin-right:auto;width:1000px;text-align:center;">

   <div style="positon:absolute;width:200px;height:100px;padding-left:100px;padding-top:100px;"></div>

</div>

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

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

********

点击复制链接 与好友分享!回本站首页

文章来源:http://www.bozhiyue.com/html_css/2016/0812/368071.html
评论
发表评论