hasLayout与Block formatting contexts的学习

@(css BFC)[IE hasLayout|妙瞳]

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 。

负责组织自身内容的元素将默认有一个布局，主要包括以下元素（不完全列表）：

	<html>, <body>

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

	<img>

	<hr>

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

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

	<marquee>

对于并非所有的元素都默认有布局，微软给出的主要原因是“性能和简洁”。如果所有的元素都默认有布局，会对性能和内存使用上产生有害的影响。http://www.satzansatz.de/cssd/onhavinglayoutrev07-20060517.html

haslayout 问题的调试与解决

当网页在 IE 中有异常表现时，可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1。使用 zoom:1 是因为大多数情况下，它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失，那基本上就可以判断是haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性，其次再考虑其他属性。

对 IE6 及更早版本来说，常用的方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1%(height:1%

hasLayout与Block formatting contexts的学习（上）的更多相关文章

  1. hasLayout与Block formatting contexts的学习(下)

    BFC布局规则: 内部的Box会在垂直方向,一个接一个地放置. Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边, ...

  2. hasLayout && Block Formatting Contexts

    转自:http://www.smallni.com/haslayout-block-formatting-contexts/ 因为本人脑子不好使,自己打印出了一张hasLayout和Block For ...

  3. margin折叠及hasLayout && Block Formatting Contexts

    margin折叠的产生有几个条件: 这些margin都处于普通流中,并在同一个BFC中: 这些margin没有被非空内容.padding.border 或 clear 分隔开: 这些margin在垂直 ...

  4. 详说 Block Formatting Contexts (块级格式化上下文)

    在上文<详说清除浮动>中,Kayo 较为详细地介绍了 BFC ,也就是本文的主角 Block Formatting Contexts (块级格式化上下文),本文会基于上文关于 BFC 的部 ...

  5. Block Formatting Contexts (块级格式化上下文) 使用参考

    转自:http://kayosite.com/block-formatting-contexts-in-detail.html 在上文<详说清除浮动>中,Kayo 较为详细地介绍了 BFC ...

  6. 我们常用，却容易忽视——CSS的BFC（Block formatting contexts）

    BFC——一个我们容易忽视掉的布局神器 今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素   效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w ...

  7. Block Formatting Contexts (块级格式化上下文) 详解

         最近在学习BootStrap框架,发现里面清除浮动的类 .clearfix 跟平时自己用的不太一样.它的样式是这样的: .clearfix:before { content: " ...

  8. BFC 详说 Block Formatting Contexts (块级格式化上下文)

    定位方案是控制元素的布局,在 CSS 2.1 中,有三种定位方案——普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对 ...

  9. 块级格式化上下文（ Block formatting contexts）

    那么如何触发BFC呢? float 除了none以外的值 overflow 除了visible 以外的值(hidden,auto,scroll ) display (table-cell,table- ...

随机推荐

  1. 在生成 Visual c + + 2005年或从 DLL 文件中使用 CString 派生的类的 Visual c + +.net 应用程序时，您可能会收到 LNK2019 错误消息

    http://support.microsoft.com/kb/309801

  2. HW6.3

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  3. 【AC自动机】专题总结

    刷了一星期+的ac自动机的题目 做一个总结~ 我的ac自动机是之前省选的时候看老师给的一个网页上学的 由于找不到原文 就贴个转载的地址吧 - - http://hi.baidu.com/winterl ...

  4. jira破解

    JIRA是一个优秀的问题(or bugs,task,improvement,new feature )跟踪及管理软件.    它由Atlassian开发,采用J2EE技术.它正被广泛的开源软件组织,以 ...

  5. mybatis代码生成器配置文件详解

    mybatis代码生成器配置文件详解 更多详见 http://generator.sturgeon.mopaas.com/index.html http://generator.sturgeon.mo ...

  6. 让IE浏览器支持CSS3圆角的方法

    如果要想在IE浏览器中实现圆角的效果,我们一般都会采用圆角图片的方式.用图片的话,基本就跟浏览器没有多大关系了,因为任何浏览器都支持这种方式.今天我们主要是讲解如果用CSS3样式表来实现圆角效果,值得 ...

  7. Android实例-利用WebBrowser实现浏览器(XE8+小米2)

    结果: 1.网络好的情况下,打开很快,很流畅. 2.地址栏真心不好使,如果真要做应用,这块必须自己优化一下. 实例代码: unit Unit1; interface uses System.SysUt ...

  8. poll()

    # include < sys/ poll. h> int poll ( struct pollfd * fds, unsigned int nfds, int timeout) ; 和s ...

  9. 第十三章、学习 Shell Scripts 条件判断式

    利用 if .... then 单层.简单条件判断式 if [ 条件判断式 ]; then 当条件判断式成立时,可以进行的命令工作内容: fi <==将 if 反过来写,就成为 fi !结束 i ...

  10. hdu 1520 (树形DP)

    dp[i][0]表示i不参加 dp[i][1]表示i参加 简单的树形dp #include<stdio.h> #include<string.h> #define N 6100 ...