haslayout

  

一、layout概述
  Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其”layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为”尺寸臭虫(dimensional bugs)”[32],意思是这些臭虫可以通过赋予相应元素某个宽度或高度解决。

“Layout”是一个 Internet Explorer for Windows的私有概念,它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。 微软的开发者们认为元素都应该可以拥有一个”属性(property)”(这是面向对象编程中的一个概念),于是他们便使用了 hasLayout,这种渲染特性生效时也就是将 hasLayout 设成了 true 之时。了解hasLayout将对IE的臭虫会有更多深入的体会甚至解决方案。  通过 IE Developer Toolbar 可以查看 IE 下 HTML 元素是否拥有haslayout,在 IE Developer Toolbar 下,拥有 haslayout 的元素,通常显示为“haslayout = -1”

二、layout的定义 
一个元素”得到 layout”,或者说一个元素”拥有 layout” 的时候,是指它的微软专有属性 hasLayout 为此被设为了 true 。一个”layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。 而”无layout元素”,是指 hasLayout 未被触发的元素,比如一个未设定宽高尺寸的干净 div 元素就可以做为一个”无layout祖先”。  给一个默认没有 layout 的元素赋予 layout 的方法包括设置可触发 hasLayout = true 的 CSS 属性。参考默认 layout 元素以及这些属性列表。没有办法设置 hasLayout = false , 除非把一开始那些触发 hasLayout = true 的 CSS 属性去除或重置。

三、Layout 的由来
 不同于标准属性,也不像某些浏览器的私有 CSS 属性,layout 无法通过某一个 CSS 声明直接设定 。也就是说没有”layout属性”这么一个东西,元素要么本身自动拥有 layout,要么借助一些 CSS 声明悄悄地获得 layout。
 下列HTML元素默认具有 layout 的:  ?

              <html>, <body>  ?

              <table>, <tr>, <th>, <td> ?

              <img> ?

              <hr>  ?

              <input>, <button>, <select>, <textarea>, <fieldset>, <legend> ?

              <iframe>, <embed>, <object>, <applet> ?

              <marquee>

设置以下CSS 属性会自动使元素获得 layout:  ?

                 position: absolute (绝对定位元素的包含区块就会经常在这一方面出问题) ?

                 float: left|right (由于 layout 元素的特性,浮动模型会有很多怪异的表现)

                 display: inline-block (一种特殊的显示类型,当一个内联级别的元素需要 layout 特性时,就可以通过该属性来实现) ?

                  width: 除 “auto” 外的任意值 (很多人遇到 layout 相关问题发生时,一般都会先尝试用这个来修复) ? height: 除 “auto” 外的任意值 (height: 1% 就在 Holly Hack 中用到)  ?

                 zoom: 除 “normal” 外的任意值( IE专有属性。不过 zoom: 1 可以临时用做调试) ?

                  writing-mode: tb-rl (IE专有属性)  ?

                 overflow-x|-y: hidden|scroll|auto (overflow-x 和 overflow-y 是 CSS3 盒模型中的属性,尚未得到浏览器的广泛支持。他们在之前 版本IE中没有触发 layout 的功能)

在 IE7 中的 haslayout 

?     position: fixed  ?

     overflow: hidden|scroll|auto  ?

     min-width: 任意值 (就算设为0也可以让该元素获得 layout) ?

     max-width: 除 “none” 之外的任意值  ?

     min-height: 任意值 (即使设为0也可以让该元素的 haslayout=true) ?

      max-height: 除 “none” 之外的任意值

四:layout的各种问题 
Layout 在显示盒模型时有着不同寻常而且难以预料的效果,而且有时甚至会牵连到他们的子元素。

一个元素是否具有”layout”可能会引发如下的一些问题(包括但不限于):  ?

       a:IE 很多常见的浮动臭虫。  ?

       b:元素本身对一些基本属性的异常处理问题。 ?

       c: 容器和其子孙之间的空白边重叠问题。 ?

       d:使用列表时遇到的诸多问题。 ?

       e:背景图像的定位偏差问题。  ?

       f:使用脚本时遇到的浏览器之间处理不一致的问题

五:重置 hasLayout

在另一条规则中重设以下属性为默认值将重置(或撤销)hasLayout,如果没有其他属性再添加 hasLayout 的话:  ?

      width, height (设为 “auto”)  ?

      max-width, max-height (设为 “none”)(在 IE 7 中) ?

      position (设为 “static”) ?

      float (设为 “none”)  ?

      overflow (设为 “visible”) (在 IE 7 中) ?

      zoom (设为 “normal”)  ?

      writing-mode (从 “tb-rl” 设为 “lr-t)

display 属性的不同:当用”inline-block”设置了 haslayout = true 时,就算在一条独立的规则中覆盖这个属性为”block”或”inline”,haslayout 这个标志位也不会被重置为 false。  把 min-width, min-height 设为它们的默认值”0″仍然会赋予 hasLayout,但是 IE 7 却可以接受一个不合法的属性”auto”来重置 hasLayout

时间: 2024-10-12 14:55:24

haslayout的相关文章

haslayout详解

定义 haslayout是IE7-浏览器的特有属性.hasLayout是一种只读属性,有两种状态:true或false.当其为true时,代表该元素有自己的布局,否则代表该元素的布局继承于父元素. [注意]通过element.currentStyle.hasLayout可以得出当前元素的hasLayout情况 HTML标签 默认触发hasLayout的有如下HTML标签: [1]html,body [2]table,tr,th,td [3]img [4]hr [5]input,button,se

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

什么是BFC,haslayout

BFC(Block Formatting Context)意思为“块级格式化范围” 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其它环境中的布局.比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的.这里有点类似一个BFC就是

谈BFC和haslayout

今天提到BFC和haslayout,就顺带在网上查查资料,总结一下它们. CSS2我们再熟悉不过,当然它里面我们需要掌握的,就是CSS2的选择器和布局,选择器总共31种.避开这个不说,我们说布局. 布局经常用到的有浮动.定位,当然也需要知道盒子模型,这里的盒子模型不是说就是内边距.外边距.边框等,他们只是其中的一种. 盒子模型总共有5个:1) BFC:2) haslayout:3) 元素盒 :4) EM盒 :5) 行盒 BFC: 含义:顾名思义就是Block Formatting Context

关于BFC与haslayout

BFC与hasLayout都是CSS布局上的概念. 几个月前在微博上才了解什么是BFC,算是对布局有点初步的了解. hasLayout则是IE6.7产生许多bug的根源. 浮动.绝对定位元素,不是块框的块容器(inline-block, table-cell, and table-caption),以及设置了overflow属性(除了visible)的块框,它们会为它们的内容形成新的 block formatting contexts (BFC). 在一个BFC中,框一个接一个的排列.垂直方向上

hasLayout属性

hasLayout是IE特有的一个属性,很多的ie下的css bug都与其息息相关. haslayout在ie8的标准模式下已经被废弃了,但是在ie7的兼容版本以及以下的版本是仍然存在的. 当一个元素的hasLayout属性值为true时,它负责对自己和可能的子孙元素进行尺寸计算和定位.虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作. 很多情况下,我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug. 下列元素默认 h

有关对hasLayout和BFC(Block Formatting Contexts)的理解

2014年1月26日 首先,hasLayout 和 Block Formatting Contexts 分别是什么? 1.hasLayout是IE内部的一个特有的隐形属性,属性值为true/false.元素一旦拥有了这个属性,就拥有了布局,也就是说该元素可以对自己及其子元素进行尺寸计算和定位(比起依赖父元素进行布局会花费更大的代价).由于这个元素是隐形的,不能通过CSS来设置hasLayout:true/false;可以通过js来检测元素是否拥有布局.hasLayout是只读属性,一旦触发,不可

【转】关于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,浮