IE Haslayout 拥有布局
2010-06-29 15:53
302 查看
IE的haslayout让人很蛋疼,所以这里具体不说了,这里[拥有布局 IE haslayout]有的是介绍!
我就记录一下默认拥有layout的元素吧:
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
怎样让一个元素获得 layout:
position: absolute
绝对定位元素的包含区块(containing block)就会经常在这一方面出问题。
float: left|right
由于 layout 元素的特性,浮动模型会有很多怪异的表现。
display: inline-block
当一个内联级别的元素需要 layout 的时候往往就要用到它,这也可能也是这个 CSS 属性的唯一效果–让某个元素拥有 layout。”inline-block行为”在IE中是可以实现的,但是非常与众不同: IE/Win: inline-block and hasLayout 。
width: 除 “auto” 外的任意值(注:IE6下内联元素会忽略 width 或 height 属性,所以设置 width 或 height 不能在此种情况下令该元素具有 layout。)
很多人遇到 layout 相关问题发生时,一般都会先尝试用这个来修复。
height: 除 “auto” 外的任意值(注:同上)
height: 1% 就在 Holly Hack 中用到。
zoom: 除 “normal” 外的任意值(总是可以触发 hasLayout,但是在 IE5.0 中不支持)
IE专有属性。不过 zoom: 1 可以临时用做调试。
writing-mode: tb-rl
MS专有属性。
overflow: hidden|scroll|auto
在 IE7 中,overflow 也变成了一个 layout 触发器,这个属性在之前版本 IE 中没有触发 layout 的功能。
overflow-x|-y: hidden|scroll|auto
overflow-x 和 overflow-y 是 CSS3 盒模型中的属性,尚未得到浏览器的广泛支持。他们在之前版本IE中没有触发 layout 的功能。
另外 IE7 的荧幕上又新添了几个 haslayout 的演员,如果只从 hasLayout 这个方面考虑,min/max 和 width/height 的表现类似,position 的 fixed 和 absolute 也是一模一样。
position: fixed
min-width: 任意值
就算设为0也可以让该元素获得 layout。
max-width: 除 “none” 之外的任意值
min-height: 任意值
即使设为0也可以让该元素的 haslayout=true
max-height: 除 “none” 之外的任意值
取消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
mid-width, mid-height 设为它们的默认值”0″仍然不会取消 hasLayout,但是在IE 7里可以用一个不合法的属性”auto”来重置 hasLayout
我就记录一下默认拥有layout的元素吧:
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
怎样让一个元素获得 layout:
position: absolute
绝对定位元素的包含区块(containing block)就会经常在这一方面出问题。
float: left|right
由于 layout 元素的特性,浮动模型会有很多怪异的表现。
display: inline-block
当一个内联级别的元素需要 layout 的时候往往就要用到它,这也可能也是这个 CSS 属性的唯一效果–让某个元素拥有 layout。”inline-block行为”在IE中是可以实现的,但是非常与众不同: IE/Win: inline-block and hasLayout 。
width: 除 “auto” 外的任意值(注:IE6下内联元素会忽略 width 或 height 属性,所以设置 width 或 height 不能在此种情况下令该元素具有 layout。)
很多人遇到 layout 相关问题发生时,一般都会先尝试用这个来修复。
height: 除 “auto” 外的任意值(注:同上)
height: 1% 就在 Holly Hack 中用到。
zoom: 除 “normal” 外的任意值(总是可以触发 hasLayout,但是在 IE5.0 中不支持)
IE专有属性。不过 zoom: 1 可以临时用做调试。
writing-mode: tb-rl
MS专有属性。
overflow: hidden|scroll|auto
在 IE7 中,overflow 也变成了一个 layout 触发器,这个属性在之前版本 IE 中没有触发 layout 的功能。
overflow-x|-y: hidden|scroll|auto
overflow-x 和 overflow-y 是 CSS3 盒模型中的属性,尚未得到浏览器的广泛支持。他们在之前版本IE中没有触发 layout 的功能。
另外 IE7 的荧幕上又新添了几个 haslayout 的演员,如果只从 hasLayout 这个方面考虑,min/max 和 width/height 的表现类似,position 的 fixed 和 absolute 也是一模一样。
position: fixed
min-width: 任意值
就算设为0也可以让该元素获得 layout。
max-width: 除 “none” 之外的任意值
min-height: 任意值
即使设为0也可以让该元素的 haslayout=true
max-height: 除 “none” 之外的任意值
取消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
mid-width, mid-height 设为它们的默认值”0″仍然不会取消 hasLayout,但是在IE 7里可以用一个不合法的属性”auto”来重置 hasLayout
相关文章推荐
- ie下的布局(layout)和拥有布局(hasLayout)
- 拥有布局 IE haslayout
- 拥有布局 IE haslayout(IE haslayout详解)
- 你了解IE的haslayout(拥有布局)吗?
- 查看 IE 下 HTML元素是否拥有haslayout
- 布局 IE haslayout
- IE中如果元素没有布局(hasLayout)设置透明度是没有效果的
- 拥有布局 - IE
- 第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题
- 用!important解决IE和Mozilla的布局差别[转贴]
- 扎根IE开发拥有自己理想的程序员--张硕
- IE8/FireFox下容器水平垂直布局问题:
- IE、Firefox使用绝对定位(absolote) 网页居中布局 支持IE7,8,FF
- css - ie - hasLayout
- IE haslayout
- IE hasLayout详解
- [转]IE6双倍边距——IE布局BUG集锦
- ie haslayout
- 关于Block Formatting Context--BFC和IE的hasLayout
- IE兼容问题解决根源:深刻理解hasLayout属性,原理与使用方法