IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

定位相关的怪异问题

Gulu77 2009-11-22 20:46:14 累计浏览 2,713 次
本机暂存

    事物绝非十全十美总有强差人意的一面,之前针对浮动分析了其引起文本重影的怪异问题,而作为浮动布局的最佳搭档定位布局也存在一定的缺陷。

    围绕着定位列出的种种问题,对某些情况只是作出了分析而暂时没有找到有解决方案,但既然知道问题所在,我们可以尽可能的采取其它措施避免这现象。

position:relative;属性值导致overflow:hidden;失效。

    问题:在IE6/7中子级设置position:relative;属性值后,导致父级的overflow:hidden;失效。Demo1

     原图已失效

    分析:与定位的层级关系有关,IE6/7解析为内容已经跳出文档流,以致父级误以为没有包含内容。

    解决方案:

    对于IE6可以为父级添加定位属性纠正问题,但IE7依然无效。

overflow充当了position:relative的角色

    问题:在IE6或IE quirks模式中设定overflow:auto/hidden/scroll属性值后,元素显示效果相当于position:relative的相对定位效果。

     Demo2

     原图已失效

    分析:在怪异模式与标准模式下的页面对CSS的解析会有一定的差异甚至是扭曲了其属性的作用,对这现象暂时还没有冲破的能力,也只能记录与回避了。

没有实渲染导致绝对定位的错误

    问题:在IE6中,子级元素绝对定位于父级元素时,当动态改变父级宽高时,子级位置没有发生变化。Demo3

     原图已失效

    分析:估计是动态改变父级宽度时,IE6并没有实时对浏览器渲染。暂时没有CSS能解决这问题,但可尝试使用JS对改变改模块高度进行刷新解决这问题。

IE6中position:relative;属性值无效

    问题:在IE6及以下版本,父级元素已设置position:relative;属性值,但子级绝对定位元素没有生效。Demo4

     原图已失效

    分析:原因在于父级元素没有触发haslayout(相关资料请搜索On having layout),IE7及以上的高级浏览器则不存在这问题。

    解决方案:

    在父级元素中添加让其触发haslayout的CSS属性值。

奇数引起定位的1pxBUG

    问题:在IE6及以下版本,父级元素宽度高度为奇数时,子级元素绝对定位于(right:0;bottom:0;),会出现往内偏移1px的错误。Demo5

     原图已失效

    分析:其真正原因还得问IE6的开发者了。但从例子中可以观察到左上角的子级元素显示正常,其原因为“盒子”拉伸扩展为上至下左至右,估计于此以至靠左边或顶部的位置不会发生移动的变化。

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  2. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)
  3. 各公司对前端开发的职位描述 (累计阅读 10,405)
  4. iframe大小自适应 (累计阅读 10,057)
  5. 浏览器的渲染原理简介 (累计阅读 8,377)
  6. 解决IE6从Nginx服务器下载图片不Cache的Bug (累计阅读 8,357)
  7. 程序员眼里IE浏览器是什么样的 (累计阅读 8,011)
  8. 2010网页设计趋势 (累计阅读 7,818)
  9. Web前端工程师编程能力飞升之路 (累计阅读 7,691)
  10. 颜色的代码表达式 (累计阅读 7,665)