ie6 position约对定位错位解决办法

ie6绝对定位的bug及其解决办法。position:absolute定位在ie6下存在left和bottom的定位错误问题

ie6中很多bug都可以通过触发layout得到解决,以上的解决方法无论是设置zoom:1还是设置width和height其实都是为了触发layout。下列的css教程属性或取值会让一个元素获得layout:       
  position:absolute 绝对定位元素的包含区块(containing block)就会经常在这一方面出问题
  float:left|right 由于layout元素的特性,浮动模型会有很多怪异的表现
  display:inline-block 当一个内联级别的元素需要layout的时候就往往符用到它,这也可能也是这个css属性的唯一效果—-让某个元素有layout
  width: 除auto外的任何值
  height: 除auto外的任何值
  zoom: 除auto外的任何值

 

 代码如下 复制代码

<!–ie6下的bottom定位错误–>
<hr />
<div style=”position:relative;border:1px solid orange;text-align:center;”>
     <a href=”http://www.111cn.net”>http://www.111cn.net/</a>
<div style=”position:absolute;bottom:0;left:0;background:#ccc;”></div>
</div>

这段代码在ie6下,bottom定位错误:解决办法和left定位类似:
  方法1是给父层设置zoom触发layout。
  方法2是给父层设置高度(height)。
<!–解决方法1 zoom:1–>
<hr />
<div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”>
     <a href=”http://www.111cn.net”>http://www.111cn.net/</a><br />
<a href=”http://www.111cn.net”>http://www.111cn.net/</a>
<div style=”position:absolute;bottom:0;left:0;background:#ccc;”></div>
</div>
<!–解决方法2 设置height–>
<hr />
<div style=”position:relative;height:60px;border:1px solid orange;text-align:center;”>
     <a href=”http://www.111cn.net”>http://www.111cn.net/</a>
<div style=”position:absolute;bottom:0;left:0;background:#ccc;”></div>
</div>

trbl属性

(top、right、bottom、left)只有当设定了position属性才有效。
当设定position:absolute
如果父级(无限)没有设定position属性,那么当前的absolute则结合trbl属性以浏览器左上角为原始点进行定位
如果父级(无限)设定position属性,那么当前的absolute则结合trbl属性以父级(最近)的左上角为原始点进行定位。

当设定position: relative
则参照父级(最近)的内容区的左上角为原始点结合trbl属性进行定位(或者说相对于被定位元素在父级内容区中的上一个元素进行偏移),无父级则以body的左上角为原始点。相对定位是不能层叠的。在使用相对定位时,无论元素是否进行移动,元素依然占据原来的空间。因此,移动元素会导致它覆盖其他框。

一般来讲,网页居中的话用absolute就容易出错,因为网页一直是随着分辨率的大小自动适应的,而absolute则会以浏览器的左上角为原始点,不会应为分辨率的变化而变化位置。有时还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。

时间: 2024-08-31 17:39:35

ie6 position约对定位错位解决办法的相关文章

css IE6 position:fixed (固定定位)通过position:absolute的解决方案

css教程 ie6 position:fixed (固定定位)通过position:absolute的解决方案,完全使用position:absolute来解决固定定位问题.因为其他的浏览器都支持绝对定位,在ie6,7,8,9,ff,chrome中均测试通过.注意一点:不能给外包含的元素mod-test设置高度,不然的话,是没有滚动条的.而应该在里面设置一个容器,它设置一个高度  <!doctype html public "-//w3c//dtd xhtml 1.0 transition

js鼠标滑过弹出层的定位IE6bug解决办法_javascript技巧

大家在写div+css的时候经常会用到弹出层,由于IE6的bug,所以当使用多个标签重复写弹出层的时候会遇到后面的层压在了弹出层的上面,这种问题在火狐浏览器下可以用z-index来解决,但是在IE6下面是不起作用的,下面的代码给大家提供了一种此类问题的解决办法,原理如下:用Jquery给弹出层的z轴依次增加高度.代码很简单,效果很显著,吼吼! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q

IE6中a:hover的bug解决办法详解

先看html部分:  代码如下 复制代码 <li> <a href=""> <span class="item_icon item_icon_11"></span> 密码提示问题 </a> </li> <li> <a href=""> <span class="item_icon item_icon_12"></s

IE6浏览器网页文字溢出的解决办法

解决|浏览器|网页 <div style="width:400px">   <div style="float:left"></div>   <!-- -->   <input type="hidden" value="hidden" />   <div style="display:none;">hidden</div>

ie6下背景图片不缓存解决办法

一,利用了execCommand来操作,很方方便代码如下.  代码如下 复制代码 if($.browser.msie && $.browser.version == "6.0"){     try{         document.execCommand('BackgroundImageCache', false, true);     }catch(e){} }; //execCommand .net一个对当前文档,当前选择或者给出范围的命令 二,IE6下默认不缓存

IE6下Flash 无法读json解决办法

经过反复排查终于找到的办法 json是由服务端动态生成的,加入了  代码如下 复制代码 application/json 的头,这个头信息在IE6下是无法识别的, 改为  代码如下 复制代码 text/json 就没有问题了

jpg图片在IE6和IE7下不显示解决办法

我在想是不是图片的名字过长(有十几个字符)或是名字大写了的原因,但把名字改过来后还是不显示. 我又想是不是图片是gif.png等其它格式的文件,被别人改成了jpg格式,所以图片不能显示,所以我把这个图片在photoshop里打开,这时突然发现图片的模式是CMYK: 这时就豁然开朗了,原来是图片的模式搞错了,应该是RGB格式,CMYK模式保存的JPEG图片无法在IE6,IE7,IE8中显示(好长时间没遇到这个问题,一时没想到),非IE内核浏览器可正常渲染,接下来就简单了,在photoshop里点击

jquery IE6 select.val() bug报错解决办法

JS代码:    代码如下 复制代码 $(function(){   for(var i=0;i<;5;i++){       $("#sel").append(''+i+'')   }   $("#sel").val("4"); }) HTML代码:  代码如下 复制代码 <SELECT id=sel></SELECT> 问题就是这样.解决方法把select.val("值") 改成attr(&q

苹果5s无法定位 iphone5s无法定位的解决办法

搜索了很多方法,打开设置,接着打开指南针设置,里面有一个use true north选项,打开打开 use true north 定位,时区就会自动锁定到了. 一般这样设置后,就可以了,但还有一小部分还是不行,那就先重启下,看行不行,不行在看下面 设置 通用 访问限制 往下拉 隐私的定位服务 打开 先把访问限制停用,然后再开启访问限制后定位 这些方法都可以试下,一般就是这几项了. 下面我再整理一个要开定位的方法 打开GPS定位功能的最正规方法,就是和上次关闭的方法是一样的!但有时,我们也可以通过