div浮动层ie6历险

转载 2012年03月23日 15:22:56

近来做个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,这么难解决的问题都能被我搞定,我还真是有点儿佩服自己:)

 

********

相关文章推荐

纯CSS定位的固定浮动层代码 不闪 兼容IE6 8 火狐 谷歌等

/* IE8 火狐  谷歌等 固定样式 */ .fixed-bottom { position: fixed; bottom: 0px; width: 1100px; left: 50%;...
  • ranbolwb
  • ranbolwb
  • 2012年04月05日 17:13
  • 10216

IE6:防止Select等元素遮挡弹出Div层

弹出一个新的窗口,只需要window的open方法就搞定了,弹出层就需要用js来控制它的一些CSS属性,如果是IE6以上的浏览器(不包括IE6),是不需要多少行代码的,但是在IE6中就有些麻烦,因为在...

IE6中Div 遮罩层覆盖不住select控件的解决方法

又是一周干着测试员的工作,没有任何任务安排,只得自己找bug来填充每天的日子。        突然想到上次在演示的时候,看到在IE6下同事自己写的弹出提示框无法遮住select下拉选择框的问题。...
  • C860_zy
  • C860_zy
  • 2014年01月27日 11:56
  • 1015

HTML CSS的兼容性问题、IE6BUG之浮动与定位篇

IE6下内容撑开设置宽高———————————————————-在IE6下,内容会撑开设置好的宽高 例如,给固定宽度的wrap_div下放left_div、right_div两个div并浮动, ...

另一个IE6关于浮动、margin-bottom的兼容问题

在做页面的时候遇到如下问题: 代码:

IE6 7 下右浮动元素自动换行问题

IE6 7 下右浮动元素自动换行问题问题原因: IE6 IE7 IE8(Q) 下,若浮动元素之前存在兄弟行内非浮动元素,IE 会将浮动元素所在的“当前行”认为是其前边的兄弟行内元素所...

ie6中容器内浮动元素的border边框不完全显示的bug

ie6中容器内浮动元素的border边框不完全显示的bug html                      职位名称             招聘人数             开始时...

position:fixed 固定定位(兼容IE6)问题及关闭浮动框的JS

生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 position:fixed; 可以让网页上...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div浮动层ie6历险
举报原因:
原因补充:

(最多只允许输入30个字)