事物并不完美,总是有令人满意的一面,在浮动分析造成文本阴影的奇怪问题之前,作为浮动布局的最佳合作伙伴定位布局也有一定的缺陷。
1.position:relative;overflow导致属性值:hidden;失效。
问题:在IE6/7中子级设置position:relative;属性值后,导致父级overflow:hidden;失效。
分析:与定位层次关系有关,IE6/7分析为内容已跳出文档流,导致父级误以为不包含内容。
解决方案:
IE6可以为父级添加定位属性纠正问题,但IE7仍然无效。
2.overflow充当position:relative的角色
问题:IE6或IE6 在quirks模式中设置overflow:auto/hidden/scroll属性值后,元素显示效果相当于position:relative的相对定位效果。
分析:在奇怪的模式和标准模式下,页面对CSS的分析会有一定的差异,甚至扭曲其属性。目前还没有突破这一现象的能力只能记录和避免。
3.绝对定位错误是由于没有真实渲染而导致的
问题:在IE6中,当子级元素绝对定位为父级元素时,当父级宽度和高度发生动态变化时,子级位置没有变化。
分析:据估计,当父级宽度发生动态变化时,IE6并没有实时渲染浏览器。目前还没有CSS能解决这个问题,但是可以尝试用JS刷新改变模块的高度。
4.IE6中position:relative;属性值无效
问题:在IE6及以下版本中,position设置了父级元素:relative;属性值,但子级绝对定位元素无效。
分析:原因是父级元素没有触发haslayout(相关信息请搜索onout) having layout),IE7及以上的高级浏览器没有这个问题。
解决方案:
添加到父级元素中,使其触发haslayout的CSS属性值。
5.1pxbug引起奇数定位
问题:在IE6及以下版本中,当父级元素的宽度高度为奇数时,子级元素绝对定位在(right:0;bottom:0;),向内偏移1px会出现错误。
分析:真正的原因是问IE6的开发人员。然而,从例子中可以看出,左上角的子级元素显示正常,因为“盒子”拉伸到上、下、左、右,据估计,左或顶部的位置不会移动。
总结
围绕定位列出的各种问题,我们只分析了某些情况,暂时没有找到解决方案,但既然我们知道问题,我们可以尽可能采取其他措施来避免这种现象。我也期待着分享你的解决方案,非常感谢。