Shulou(Shulou.com)06/03 Report--

This article introduces whether you can try to trigger its layout when you encounter unknown problems in IE6,7. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

If you find an exception in IE6,7 and you don't know how to solve it, you can try to trigger its haslayout:

I am not talented, today also encountered a bug tried a lot of methods, and finally added a height:1%, to the entire parent class and then solved it smoothly.

The code is as follows:

Height:1%

Position: absolute

Float: left | right

Display: inline-block

Width:! auto-value other than auto

Height:! auto-value other than auto

Zoom:! normal-value other than normal

Writing-mode: tb-rl

Overflow: hidden | scroll | auto-IE7 is valid

Position: fixed-IE7 is valid

Min-width: *-IE7 is valid, any value

Min-height: *-IE7 is valid, any value

Max-width:! none-IE7 is valid, any value except none

Max-height:! none-IE7 is valid, any value except none

For inline elements (default is inline elements, such as span, or display:inline; elements)

For IE6, if the browser is running in standard compatibility mode, the inline element ignores the width or height attribute, so setting width or height does not order the element to have layout in this case.

Zoom can always trigger hasLayout, but it is not supported in IE5.0.

If an element with "layout" simultaneously display: inline, then its behavior is very similar to that of inline-block in the standard: it is arranged horizontally and sequentially like ordinary text in paragraphs, is affected by vertical-align, and can be resized adaptively according to the content. This also explains why inline elements can contain block-level elements without problems in IE/Win alone, because in other browsers display: inline is inline, unlike IE, which becomes inline-block once an inline element has an layout.

Debugging and solving of haslayout problem

When a web page behaves abnormally in IE, you can try to trigger haslayout to see if it is the problem. A common method is to set zoom:1 for an element css. Zoom:1 is used because in most cases, it can fire the haslayout of an element without affecting the existing environment. Once the problem disappears, it can basically be judged to be the cause of haslayout. You can then correct the problem by setting the corresponding css property. It is recommended that you first consider setting the width/height attribute of the element, and then consider other attributes.

For IE6 and earlier versions, the common method is called Holly Holly hack, which sets the height of this element to 1% (height:1%;). Note that this method becomes invalid when the element's overflow property is set to visible. Or use IE's conditional comments.

For IE7, the best way is to set the minimum height of the element to 0 (min-height:0;).

Common bug caused by haslayout problems

IE6 and earlier versions of double-margin floating bug

Bug repair: display:inline

3 pixel offset bug of IE5-6/win

Bug repair: _ height:1%

E6 peekaboo (peek-a-boo) bug

Bug repair: _ height:1%

On the IE6,7 encountered unknown problems can not be solved can try to trigger its layout to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.