1

hasLayout知多少

2 years ago

source link: http://www.poetries.top/2016/09/07/hasLayout%E7%9F%A5%E5%A4%9A%E5%B0%91/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

hasLayout知多少

Created at 2016-09-07 Updated at 2017-01-06 Category Front-End Tag CSS

什么是haslayout

什么是hasLayout？hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作

默认拥有haslayout属性

<html>, <body>
<table>, <tr>, <th>,<td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>

触发haslayout属性

很多情况下，我们把hasLayout的状态改成true就可以解决很大部分ie下显示的bug。
hasLayout属性不能直接设定，你只能通过设定一些特定的css属性来触发并改变 hasLayout状态。下面列出可以触发hasLayout的一些CSS属性值
- display
  - 启动haslayout的值:inline-block
  - 取消hasLayout的值:其他值
- width / height
  - 启动hasLayout的值：除了auto以外的值
  - 取消hasLayout的值：auto
    - ( 对 IE6及更早版本来说很常用，该方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1% (height:1%;)。但是要注意，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。)
- position
  - 启动hasLayout的值：absolute
  - 取消hasLayout的值：static
- float
  - 启动hasLayout的值：left或right
  - 取消hasLayout的值：none
- zoom
  - 启动hasLayout的值：有值
  - 取消hasLayout的值：narmal或者空值
  - (又一个ie私有属性，不兼容标准。)
- ie7还有一些额外的属性可以触发该属性（不完全列表）：
  - min-height: (任何值)
  - max-height:(任何值除了none)
  - min-width:(任何值)
  - max-width: (任何值除了none)
  - overflow:(任何值除了visible)
  - overflow-x: (任何值除了visible)
  - overflow-y: (任何值除了visible)
  - position: fixed

发现及使用

因元素hasLayout而导致的问题其实一般都很容易发现：往往是内容出现错位甚至完全不可见，比如含浮动或者绝对定位子元素的容器高度会塌陷，在ie6/ie7下我们为其添加zoom：1属性就触发了haslayout，从而修复高度塌陷的问题;再比如，我们经常会碰到ie6和ie7同时出现的bug，这个时候可以考虑是否源于 haslayout，可以添加一些可以触发haslayout的属性来解决

Recommend

About Joyk

Aggregate valuable and interesting links.
Joyk means Joy of geeK