时间:2021-07-01 10:21:17 帮助过:24人阅读
@(css BFC)[IE hasLayout|妙瞳]
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)。注意:hasLayout属性是微软特有的过时属性,在IE8、IE9中,hasLayout属性已经被废弃。下文中的InternetExplorer都是指IE7、IE6及以下版本。
当一个元素有一个布局时,它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说,这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作。因此,一些元素默认会有一个布局。当我们说一个元素“拥有layout”或“得到layout”,或者说一个元素“has layout” 的时候,我们的意思是指它的微软专有属性 hasLayout 被设为了 true。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout的元素。通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout,在 IE Developer Toolbar 下,拥有 haslayout的元素,通常显示为“haslayout = -1”。‘Layout’ 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ,如 object.currentStyle.hasLayout 。
负责组织自身内容的元素将默认有一个布局,主要包括以下元素(不完全列表):
,
haslayout 问题的调试与解决
当网页在 IE 中有异常表现时,可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1。使用 zoom:1 是因为大多数情况下,它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失,那基本上就可以判断是haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性,其次再考虑其他属性。对 IE6 及更早版本来说,常用的方法被称为霍莉破解(Holly hack),即设定这个元素的高度为 1%(height:1%;)。需要注意的是,当这个元素的 overflow 属性被设置为 visible 时,这个方法就失效了。或者使用 IE的条件注释。对 IE7 来说,最好的方法是设置元素的最小高度为 0 (min-height:0;)。haslayout 问题引起的常见 bugIE6 及更低版本的双空白边浮动 bugbug 修复: display:inline;IE5-6/win 的 3 像素偏移 bugbug 修复: height:1%;IE6 的躲躲猫(peek-a-boo) bugbug 修复: height:1%;IE6/7负margin隐藏Bug:bug 修复:去掉父元素的hasLayout;或者赋hasLayout给子元素,并添加position:relative;
如何激发 haslayout?
大部分的 IE 显示错误,都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout,使其“拥有布局”。如下所示,通过设置以下 css 属性即可。
Internet Explorer 7 还有一些额外的属性(不完全列表):
本文参考W3C CSS 2.1 规范 Visual formatting modelhttp://www.w3.org/TR/CSS2/http://www.w3.org/TR/CSS2/visuren.html#inline-levelhttp://www.w3.org/TR/CSS2/visuren.html#normal-flow
Box: CSS布局的基本单位
Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子:
block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;run-in box: css3 中才有,暂时不讲。http://www.w3.org/TR/css3-box/#run-in-boxes
Formatting context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting contexts 有 Block fomatting contexts (简称BFC)和 Inline formatting contexts(简称IFC)。
CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。 BFC 定义
BFC(Block formatting contexts)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。 BFC布局规则:
如何触发BFC?
今天总结到这里,明天继续下篇。假如有错误或不足的地方,欢迎指出,非常感谢!----妙瞳。
< 上一篇
CSS背景图拉伸不变形_html/css_WEB-ITnose
下一篇 >
seajs-cssless加载_html/css_WEB-ITnose
记住我的登录 忘记密码?
登录
我已阅读用户协议及版权声明
注册