`
zzc1684
  • 浏览: 1190733 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

IE6 下父级(relative)使用padding后,子元素绝对定位(absolute)的bug

阅读更多

在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但 ie6对left,top,right等属性的解释和ie7,ie8及firefox、chrome等貌似有些不一致。

父层使用position:relative;和padding(当然0值除外)后,ie6中层的定位起始坐标是从padding后的位置算起, 而其他则从层的真实位置算起,而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的 表现不一样。

 

解决办法:父级元素设定高度。

分享到:
评论

相关推荐

    CSS让子容器超出父元素(子容器悬浮在父容器效果)

    第二步:子容器定位设置为 absolute(绝对定位)。 我要浮出去! #a{ width:400px; height:100px; background:rgb(0, 0, 0); position:relative;/*父元素>相对定位*/ } #b{ width: 150px; height:50px;

    IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素

    多数情况下隐藏(设置display:none)一个元素,无需依次将其内的所有子元素都隐藏。非要这么做,有时会碰到意想不到的bug。

    IE6中DIV使用了relative不定义宽度导致right定位误差

    没时间想那么多迫不得已就使用了hack方法解决,于是晚上闲余时特意测试了一下,最后终于找到原因之所在了:IE6中如果使用absolute标签的父级DIV(此DIV使用了relative)不定义宽度,则该标签的right定位会出问题。...

    解决IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容

    令人蛋疼的IE,IE6/IE7下父元素有相对/绝对定位时,子元素在IE6和IE7下overflow:hidden;失效。 情况一:(在parent上增加position:relative) 复制代码代码如下: <style type=”text/css”> .parent{ width:...

    绝对定位(absolute)和浮动定位(float)分析

    第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning),它可以将文档中的某个元素从其原本位置上移除,并重新定位在期望的任何地点之上。第二种则是使用CSS中的...

    前端面试题.md

    ,这条语句的作用将元素从文档流中拖出来,将不占用原来元素的空间,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查,直到相对于body元素...

    IE overflow:hidden失效的解决方法

    overflow:hidden失效 当父元素的直接子...我的办法:子元素设置绝对定位,父元素相对定位,这样overflow:hidden就不会失效了。 IE下CSS溢出隐藏失败(IE overflow:hidden失效) 复制代码代码如下: ”slides-pic”> <

    CSS position属性absolute relative等五个值的解释

    其中absolute和relative是最常用的,fixed用得也比较多(其中IE6并不支持fixed)。 1、absolute(绝对定位) absolute是生成觉对定位的元素,脱离了文本流(即在文档中已经不占据位置),参照浏览器的左上角通过top,...

    css中定位中的absolute和relative是什么意思

    absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。 ralative是指相对定位,就是依据left,...

    HTML5&CSS3网页制作:相对定位.pptx

    在CSS中,通过定位属性可以实现网页中元素的精确定位,元素的定位属性主要包括定位模式和边偏移两部分。 相对定位 描述 相对定位是将元素相对于自身原本的位置,通过偏移指定的距离,到达新的位置,元素仍然保持其未...

    css position 定位

    那就记住这节课最后总结的一句话“如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding的属性影响,当然你也可以用...

    position的relative和absolute总结

    对position的属性relative和absolute的总结

    区别div和span、relative和absolute、display和visibility

    一、div和span的区别 div是一个块级元素,可以包含段落,... 他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原

    css元素常见定位应用.html

    在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文中,任何一个元素都被文本流所限制了自身的位置,但是...

    IE7中绝对定位元素之间的遮盖问题示例探讨

    认为他们的样式和效果都是比较人性化的,不过很多时候还是不得不考虑其他版本浏览器的感受,这里IE6就不用考虑他了,这货简直就是IT史上的奇葩,这里要说一个IE7的绝对定位和相对定位后,出现元素遮挡的问题。...

    CSS中position定位的个熟悉示例介绍

    absolute绝对定位(相对于最近的父元素,假如父元素都是默认的static,那么将相对body进行定位,如果父元素为relative定位,那么就相对该父元素进行定位) relative相对定位(相对于自己,在原来位置上移动。与...

    ie6下position:absolute不显示问题解决方法

    position:absolute属性在其他浏览器中都是正常的,但惟独在ie6下有问题,下面是经过测试可行的解决方法

    利用CSS定位背景图片的常用方法总结

    在网络上,对absolute存在这样一个误解,认为绝对定位absolute的使用必须要设置父元素相对定位relative。这样的理解不能认为是错的,只能说对定义没有完全认识。在W3C文档中是这样定义absolute的: 生成绝对定位的...

Global site tag (gtag.js) - Google Analytics