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

 

********

div浮动层ie6历险

在正常显示的页面中是text-align:left,而异常的页面中为text-align:center。原来,如果设置成居中的话,ie6下浮动层的起点就会以父层的中点计算...
  • gaofeng2000
  • gaofeng2000
  • 2010年11月11日 00:36
  • 1210

体验css+div 之 实现简单浮动层的基本方法

不过这种布局对窗口尺寸的适应能力极弱,所以不得不每次考虑这次的网站做成1003还是780,而信息的呈现方式也极其死板,比如说在一个类似于list的信息汇总页面,如果用户想了解某一个item的详情,一般...
  • zhengbo0
  • zhengbo0
  • 2012年06月07日 19:10
  • 1386

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

IE6下内容撑开设置宽高———————————————————-在IE6下,内容会撑开设置好的宽高 例如,给固定宽度的wrap_div下放left_div、right_div两个div并浮动, ...
  • u014420383
  • u014420383
  • 2015年08月08日 16:45
  • 1229

DIV CSS浮动属性

网页布局 .clear { clear:both; height:0; font-size:0; line-height:0; } .header, .container, .footer ...
  • yanli_xu
  • yanli_xu
  • 2012年06月05日 13:00
  • 1629

div浮动层被图片、select等遮挡的处理办法

在div层内加一段iframe代码:   如果被flash遮挡:对flash加个参数
  • yctcsms
  • yctcsms
  • 2010年06月09日 13:26
  • 2369

浮动的div层置顶显示

问题:浮动层被select组件覆盖住一部分。div被select挡住,是一个比较常见的问题。  解决方法是:虽说div直接盖不住select   但是div可以盖iframe,而iframe可以盖s...
  • wq122289014
  • wq122289014
  • 2016年10月21日 10:16
  • 2991

css中解决浮动DIV撑开父层高度的问题

1) 加高法: 浮动的元素,只能被有高度的盒子关住。 也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适...
  • qq_16711967
  • qq_16711967
  • 2016年12月14日 10:31
  • 301

div浮动层,遮罩层屏幕居中(水平垂直居中)CSS代码

.toast{      width:100px;      height:100px;      background:transparent;      background:rgba(0...
  • u013103102
  • u013103102
  • 2016年10月06日 18:50
  • 3322

Div 浮动到另一个div之上:

Div 浮动到另一个div之上: 绝对定位相对定位 .fj1 { position: absolute; ...
  • WDYDXF
  • WDYDXF
  • 2013年03月04日 16:36
  • 34965

弹出窗口(DIV浮动)

widget.css: .widget_newfolder .p1 { font-size: 20px; } .widget_newfolder .p2 { margin-top: 15px; }...
  • hutao1101175783
  • hutao1101175783
  • 2013年10月05日 23:04
  • 1984
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div浮动层ie6历险
举报原因:
原因补充:

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