所有分类
  • 所有分类
  • 后端开发
定位相关的怪异问题

定位相关的怪异问题

运行环境:Windows
所需软件:Word
资源类型:简历

事物并不完美,总是有令人满意的一面,在浮动分析造成文本阴影的奇怪问题之前,作为浮动布局的最佳合作伙伴定位布局也有一定的缺陷。

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的开发人员。然而,从例子中可以看出,左上角的子级元素显示正常,因为“盒子”拉伸到上、下、左、右,据估计,左或顶部的位置不会移动。

总结

围绕定位列出的各种问题,我们只分析了某些情况,暂时没有找到解决方案,但既然我们知道问题,我们可以尽可能采取其他措施来避免这种现象。我也期待着分享你的解决方案,非常感谢。

原文链接:https://www.icz.com/technicalinformation/web/html/2023/05/8849.html,转载请注明出处~~~
0
注意:请收藏好网址www.icz.com,防止失联!站内免费资源持续上传中…!赞助我们
显示验证码
没有账号?注册  忘记密码?