在IE6中设置绝对定位,在left与bottom都会出现错位问题。配合以下代码,可以帮你理解这个问题,比较下现代浏览器与IE6的差异就知道问题在哪了。另外,对于定位还没掌握好的同学,看看这个是很有帮助的,记得用firebug调试,尝试着修改几个样式。

IE6下的left定位错误

父级div,文本居中

文本居中的子元素div,绝对定位top:0;left:0;

父级div,文本居右

文本居右的子元素div,绝对定位top:0;left:0;

IE6下的left定位错误的解决方法1:父级元素添加zoom:1;

父级div,文本居中,加了zoom:1;

文本居中的子元素div,绝对定位top:0;left:0;

IE6下的left定位错误的解决方法2:父级元素添加width;

父级div,文本居右,加了width:99%;

文本居右的子元素div,绝对定位top:0;left:0;

IE6下的bottom定位错误

父级div,文本居中

bottom定位错位了。文本居中的子元素div,绝对定位bottom:0;left:0;

父级div,文本居右

bottom定位错位了。文本居右的子元素div,绝对定位bottom:0;left:0;

IE6下的bottom定位错误的解决方法1:父级元素添加zoom:1;

父级div,文本居中,加了zoom:1;

文本居中的子元素div,绝对定位bottom:0;left:0;

IE6下的left定位错误的解决方法2:父级元素添加height;

父级div,文本居右,加了height:60px;

文本居右的子元素div,绝对定位bottom:0;left:0;

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

转载请注明来自:爱前端

发表评论

电子邮件地址不会被公开。 必填项已用*标注