在IE6,7中遇到未知的难题没法处理时能够尝试开启

2020-10-21 23:51 jianzhan
在IE6,7中假如发现某个出现异常不知道道怎样处理的情况下能够尝试着开启其haslayout:

敝人不才,今日也遇到了1个bug尝试了许多方式,最后在全部父类再加1个height:1%,随后圆满处理。

拷贝编码
编码以下:

height:1%
position: absolute
float: left | right
display: inline-block
width: !auto - 除auto之外的值
height: !auto - 除auto之外的值
zoom: !normal - 除normal之外的值
writing-mode: tb-rl
overflow: hidden | scroll | auto - IE7合理
position: fixed - IE7合理
min-width: * - IE7合理,任何值
min-height: * -IE7合理,任何值
max-width: !none - IE7合理,除none外任何值
max-height: !none - IE7合理,除none外任何值

针对内联元素(默认设置即为内联的元素,如 span,或 display:inline; 的元素),

而针对 IE6,假如访问器运作于规范适配方式下,内联元素会忽视 width 或 height 特性,因此设定 width 或 height 不可以在此种状况下令该元素具备 layout。
zoom 一直能够开启 hasLayout,可是在 IE5.0 中不适用。

具备“layout” 的元素假如另外 display: inline ,那末它的个人行为就和规范中所说的 inline-block 很相近了:在段落中合一般文本1样在水平方位和持续排序,受 vertical-align 危害,而且尺寸能够依据內容自融入调剂。这还可以解释为何单是在 IE/Win 中内联元素能够包括块级元素而少出难题,由于在其他访问器中 display: inline 便是内联,不像 IE 1旦内联元素有着 layout 还会变为 inline-block。

haslayout 难题的调节与处理

当网页页面在 IE 中有出现异常主要表现时,能够尝试激起 haslayout 看来看是否难题所属。常见的方式是给某元素 css 设置 zoom:1 。应用 zoom:1 是由于大多数数状况下,它能在不危害现有自然环境的标准下激起元素的 haslayout。而1旦难题消退,那基础上便可以分辨是 haslayout 的缘故。随后便可以根据设置相应的 css 特性来对这个难题开展调整了。提议最先要考虑到的是设置元素的 width/height 特性,其次再考虑到别的特性。

对 IE6 及更早版本号来讲,常见的方式被称为霍莉破译(Holly hack),即设置这个元素的高宽比为 1% (height:1%;)。必须留意的是,当这个元素的 overflow 特性被设定为 visible 时,这个方式就无效了。或应用 IE 的标准注解。

对 IE7 来讲,最好是的方式时设定元素的最少高宽比为 0 (min-height:0;)。

haslayout 难题引发的普遍 bug
IE6 及更低版本号的双空白边波动 bug

bug 修补: display:inline;
IE5⑹/win 的 3 像素偏位 bug

bug 修补: _height:1%;
E6 的躲躲猫(peek-a-boo) bug

bug 修补: _height:1%;