【转】前端开发人员需要了解的IE hasLayout

IE的haslayout是个很纠结的东西，但作为一名合格的前端开发人员来说，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的各种问题

Layout 在显示盒模型时有着不同寻常而且难以预料的效果，而且有时甚至会牵连到他们的子元素。

一个元素是否具有”layout”可能会引发如下的一些问题（包括但不限于）：

  • IE 很多常见的浮动臭虫。
  • 元素本身对一些基本属性的异常处理问题。
  • 容器和其子孙之间的空白边重叠问题。
  • 使用列表时遇到的诸多问题。
  • 背景图像的定位偏差问题。
  • 使用脚本时遇到的浏览器之间处理不一致的问题。

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” 之外的任意值

有关内联级别元素

对于内联元素(可以是默认即为内联的比如 span 元素，也可以是 display: inline 的元素)

  • width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于 IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height 不能在此种情况下令该元素具有 layout。
  • zoom 总是可以触发 hasLayout，但是在 IE5.0 中不支持。

具有”layout” 的元素如果同时也 display: inline ，那么它的行为就和标准中所说的 inline-block 很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align 影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE中内联元素可以包含块级元素而少出问题，因为在别的浏览器中 display: inline 就是内联，不像 IE中内联元素拥有 layout 还会变成 inline-block。

重置 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。

 

本文是从网上资料整理出来的，通过适当的优化，希望可以给大家带来帮助，参考文章如下：

http://haslayout.net/haslayout

http://baike.baidu.com/view/2945869.htm

 

 

posted @ 2012-02-06 13:12  白树  阅读(994)  评论(0)  编辑  收藏  举报

Copyright 2011- | 网站统计：腾讯分析