`
jianhan513
  • 浏览: 20759 次
  • 性别: Icon_minigender_2
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

定位相关的怪异问题

阅读更多

原文链接:http://blog.gulu77.com/?p=609

 

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

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

 

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

     

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

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

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

  2. overflow充当了position:relative的角色

     

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

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

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

     

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

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

  4. IE6中position:relative;属性值无效

     

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

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

    解决方案:
    在父级元素中添加让其触发haslayout的CSS属性值。

  5. 奇数引起定位的1pxBUG

     

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

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

分享到:
评论

相关推荐

    Python-用于vimneovim的怪异快速模糊查找器Denitematcher

    在压缩包文件名"raghur-fruzzy-3931fb6"中,“fruzzy”可能是指“fuzzy”(模糊)的拼写变体,暗示这个项目可能与模糊查找有关。而“raghur”可能是开发者的名字或项目别名,而“3931fb6”通常是一个版本控制系统的...

    CSS浏览器兼容性与解析问题终极归纳[整理].pdf

    首先,我们关注的是**怪异模式问题**。当HTML文档没有定义DTD(文档类型声明)时,浏览器可能会进入怪异模式。在Firefox中,即使没有DTD,它仍会使用标准模式解析,但Internet Explorer(特别是旧版本如IE6)则会...

    IE和谷歌浏览器下div宽度不一致的问题解决.txt

    - 明确指定所有盒子模型相关的属性,如`padding`、`margin`、`border`等,并使用盒模型统一标准,比如使用`box-sizing:border-box;`。 2. **调整浮动行为**: - 使用`clear:both;`清除浮动,避免元素因为浮动而...

    CSS浮动属性Float详解[收集].pdf

    为了防止怪异的布局和跨浏览器的问题,塌陷问题几乎总是被要处理的。我们可以使用清除浮动的技术来解决这个问题。清除浮动的技术有多种,例如使用clear:both;来清除浮动、空div方法和overflow方法。 空div方法是指...

    web前端综合问题版(125题)..pdf

    盒模型有标准和怪异两种。CSS后处理器如PostCSS和autoprefixer用于处理兼容性。 #### 布局技术 布局技术包括flex、grid和table布局,以及float、clear浮动的使用。 #### CSS尺寸单位 CSS尺寸单位有px、em、rem、vw...

    《链接器和加载器》(中文版)

    ### 《链接器和加载器》(中文版)—— 关键知识点详解 #### 第1章 链接和加载 **链接器和加载器的作用**: ...这本书深入探讨了链接器和加载器的相关技术和原理,对于理解现代操作系统中的程序执行过程至关重要。

    微软订阅邮件

    - 创建动态Tree控件可以通过动态添加和删除节点以及监听相关的控件事件实现。 - **如何重载MRU文件**(P.25) - 重载MRU文件可以通过自定义`CMRUFile`类或通过覆盖相应的`CWinApp`方法实现。 - **CImageList控件中...

    程序与人生

    这些回复反映了程序员在解决问题时的心理状态,从最初的困惑、质疑到尝试定位问题的根源,展示了编程工作的复杂性和挑战性。 ### 生活健康小贴士 在文本的后半部分,提到了一些关于保持健康生活方式的建议,包括...

    CSS培训教程共14页.pdf.zip

    【CSS培训教程共14页.pdf.zip】是一个压缩文件,其中包含了有关CSS(Cascading Style Sheets)的培训教程。CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它控制网页的布局...

    WEB基础_CSSDIV

    默认盒模型(W3C标准)和IE盒模型(怪异模式)在边框和内边距的计算上有所不同。 4. **定位机制**:CSS提供了相对定位、绝对定位、固定定位等,用于控制元素在页面上的位置。其中,`position: relative`相对于元素...

    校区某咖啡屋广告策划提案.pptx

    针对不去的原因,如认为咖啡屋位于图书馆显得怪异,消费过高,以及部分学生不喜欢咖啡等,咖啡屋已经做出改进,如改善环境,推出优惠方案,并增加非咖啡类饮品。 调查中还列出了消费者对咖啡重视的几个因素:品位、...

    前端(2).docxvue面试题初级

    在Vue面试中,初级开发者通常会被问到关于HTML、CSS、JavaScript基础以及Vue特性的相关问题。以下是根据提供的内容整理的一些核心知识点: 1. **块级元素与行内块元素的区别及转换**: - 块级元素如`div`,占据...

    IE行为手册

    这份"IE行为手册"旨在深入探讨IE浏览器在处理CSS、JavaScript等方面的一些特殊性,帮助开发者更好地理解和解决与IE相关的兼容性问题。 1. **CSS兼容性问题** - **盒模型差异**:IE6及以下版本使用的是"怪异盒模型...

    Bootstrap-datetimepicker先天bug修复,兼容IE6+

    1. **CSS兼容性**:IE6及以下版本对CSS的支持非常有限,例如不支持浮动定位、透明度、圆角边框等。因此,需要使用条件注释或者专门针对IE的CSS hack来确保日期时间选择器的样式在旧版IE中正常显示。 2. **...

    斯维尔建筑设计软件Arch2010最新版

    35. 解决【插入图框】风格怪异(标题太靠上,右上角缺“关闭”按钮)的问题 36.【转二维图】门窗转换支持炸散的线条为PL线的情况 缺陷修复 37. 墙右键菜单的【墙体造型】未能选物体 38.【双跑楼梯】有柱子遮挡时...

    仅限于自己用的web前端面试题

    - 不同的浏览器内核对标准的支持程度有所不同,这也导致了跨浏览器兼容性问题。 ### 三、行内元素与块级元素的区别 - **块级元素**:默认情况下独占一行,如 `<div>`、`<p>`。 - **行内元素**:不会独占一行,如 `...

    238道大厂前端高频面试题

    本资源摘要信息涵盖了前端开发中的高频面试题,涵盖 HTML、CSS、浏览器相关知识点。本文将对这些问题进行详细的解释和描述,帮助读者更好地理解和掌握前端开发中的关键概念。 1. 网络中使用最多的图片格式有哪些 ...

    盒子属性和html项目

    例如,通过负外边距可以实现元素重叠效果,通过相对定位和绝对定位实现复杂的定位布局。 5. **工具应用**:在实际开发中,开发者可能使用Firefox的开发者工具、Chrome的DevTools等来实时查看和调整元素的盒模型属性...

    css2.0手册下载

    它旨在提供全面、最新的CSS2.0(层叠样式表第二版)规范解析,帮助开发者快速查找和理解相关样式表的属性、选择器以及布局技术。CSS2.0是Web设计领域中的一个重要里程碑,它极大地丰富了网页的表现力和可维护性,让...

Global site tag (gtag.js) - Google Analytics