代码改变世界

ie6绝对定位 bottom问题

2011-09-07 11:48  sniper007  阅读(594)  评论(0编辑  收藏  举报

安我们已知的思路,在定位position:absolute;时,要给它找一个相对定位的元素(多数为父元素/body元素).
在使用position:absolute;后, 再定位top/left/bottom/right/其中的两个.

  1. 如果只定位其中的一个属性的话,比如left;那么绝对定位元素会在原文档流位置Y轴方向不变,在X轴方向设置left属性. 其它的同理.
  2. 如果设置top、left/right的话,结果所有的浏览器会安自己原意的思路进行定位. 但是见3.
  3. 如果设置bottom、left/right的话,在ie6浏览器下就会显示不同的效果.此时有两种情况。见下.

第3种情况又有两种情况.

  1. 如果绝对定位元素后没有内容的话,可以正常显示(和想要的效果一致).
    html结构:   <div><p>它的父元素为相对定位元素</p><div>这里是想要设置绝对定位的元素</div></div>
    绝对定位元素和相对定位元素后都没有内容(这里主要指相对定位元素后后不再有内容)
  2. 如果相对定位元素后有内容的话,在ie 6 浏览器下会显示不同的效果. html结构是在上面结构基础上,再在相对定位的div元素后加内容,比如<p />
    解决方案: 让父元素有layout即可。 比如:zoom:1;或者 设置width值  或者font-size:0;
    有关layout的内容: http://www.blueidea.com/tech/site/2006/3698.asp

ps: 如果元素是固定宽度的话,还是设置一下宽度比较好,避免发生意想不到的问题.