hasLayout属性

hasLayout是IE特有的一个属性,很多的ie下的css bug都与其息息相关。

haslayout在ie8的标准模式下已经被废弃了,但是在ie7的兼容版本以及以下的版本是仍然存在的。

当一个元素的hasLayout属性值为true时,它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作。

很多情况下,我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug。

下列元素默认 hasLayout=true

<table> <td> <body> <img> <hr> <input> <select> <textarea> <button> <iframe> <embed> <object> <applet> <marquee>

hasLayout属性不能直接设定,你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态。

列出可以触发hasLayout的一些CSS属性值。

display

启动haslayout的值:inline-block

取消hasLayout的值:其他值

--------------------------------------

width/height

启动hasLayout的值:除了auto以外的值

取消hasLayout的值:auto

---------------------------------------

position

启动hasLayout的值:absolute

取消hasLayout的值:static

----------------------------------------

float

启动hasLayout的值:left或right

取消hasLayout的值:none

---------------------------------------

zoom

启动hasLayout的值:有值

取消hasLayout的值:narmal或者空值

zoom是微软IE专有属性,可以触发hasLayout但不会影响页面的显示效果。

zoom: 1常用来除错,不过 ie 5 对这个属性不支持。"

hasLayout 引起的不兼容

无浮动盒子div模型内一个浮动div盒子,边框高度撑不开,其高度并不会自动计算

处理。

无浮动的div加上个zoom:1;来触发其hasLayout属性

给一个确定的高度值 height

添加浮动 float

添加定位 position

添加 display:inline-block

通常firefox等标准的遵守浏览器可以加上overflow: hidden;来解决,而IE则不行,需要触发其hasLayout属性才可以。

时间: 2024-10-02 21:44:22

hasLayout属性的相关文章

HTML+CSS总结/谈谈BFC与ie特有属性hasLayout

最近看了一篇总结ie常见bug的文章,里面提到ie多数的bug源于她的特有属性:hasLayout.这个属性以前也了解过一点,但没有深入去理解,于是查阅了一些相关的资料,现在在此来对这个属性作一下总结. 一.hasLayout的定义. 这里我就不一一敲了,直接复制百度的咯. 在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容.为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false.当一个元素的 hasLa

BFC与HasLayout的理解

1.(Block Formatting Contexts)BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 2.BFC布局规则: 内部的Box会在垂直方向,一个接一个地放置. Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的mar

BFC和haslayout

haslayout 的概念 haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分.在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容.为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false.当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout). 要想更好的理解 css, 尤其是 IE 下对 c

5种IE hasLayoutt的属性及其值

hasLayout 是Windows  Internet  Explore 渲染引擎的一个内部组成部分.在 Internet Explore 中,一个元素要么自己对自身内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容.为了调节这两个不同的概念,渲染引擎采用了hasLayout 的属性,属性值可以为true或者false.当一个元素的属性值为true时,我们就说这个元素有一个布局(Layout).部分的IE显示的错误,都可以激发元素的 hasLayout 属性来修正.可以通过设置css

【转】关于Block Formatting Context--BFC和IE的hasLayout

转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其它环境中的布局.比如浮动元素会形成BFC,浮

haslayout知多少

我们都知道浏览器有bug,而IE的bug似乎比大多数浏览器都多.IE的表现与其他浏览器不同的原因之一就是,显示引擎使用一个称为布局(layout)的内部概念. 因为布局是专门针对显示引擎内部工作方式的概念,所以一般情况下不需要了解它.但是,布局问题是许多IE显示bug的根源,所以理解这个概念以及它如何影响CSS对修复bug是有帮助的. 一.什么是haslayout haslayout是Windows Internet Explorer渲染引擎的一个内部组成部分.在Internet Explore

IE haslayout及其bug解决方法

要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念.大多 IE下的显示错误,就是源于 haslayout. 什么是 haslayout ? haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分.在Internet Explorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容.为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,

BFC、haslayout

BFC(block块,f格式化,c上下文content )译为"块级格式化上下文" 它是指一个独立的块级渲染区域,只有Block-level BOX参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关. CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC. 根元素 float的值不为none overflow的值不为visible display的值为inline-block.table-cell.table-caption position的值为absolut

关于Block Formatting Context--BFC和IE的hasLayout

本文--- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其它环境中的布局.比如浮动元素会