Home > Developer > Web Develop
What is Haslayout？Haslayout is an attribute unique to ie. Many of the CSS bugs under IE are closely related to them. In IE, an element either calculates the size and organization of its own content, or relies on the parent element to calculate the size and organization of the content. When the value of an element's Haslayout property is true, it is responsible for sizing and positioning itself and possible descendant elements. While this means that the element needs to spend more to maintain itself and its content, rather than relying on ancestral elements to do the work.
The following elements default Haslayout=true
<table> <td> <body>
In many cases, we can change the state of the haslayout to true to solve a lot of the bugs shown in IE.
The Haslayout property cannot be set directly, and you can only trigger and change the haslayout state by setting some specific CSS properties. The following lists some of the CSS property values that can trigger haslayout.
-------------------------------------
Display
Value of startup haslayout: Inline-block
Cancel Haslayout Value: Other value
--------------------------------------
Width/height
value to start Haslayout: value other than auto
Cancel the value of Haslayout: Auto
---------------------------------------
position
Value of startup haslayout: Absolute
Cancel the value of Haslayout: Static
----------------------------------------
float
value of Start Haslayout: left or right
Cancel the value of Haslayout: None
---------------------------------------
Zoom
Value of startup haslayout: Value
Cancel Haslayout value: Narmal or null value
(zoom is a Microsoft IE proprietary property that can trigger haslayout without affecting the display of the page.) Zoom:1 is commonly used to remove errors, but IE 5 does not support this attribute. )
----------------------------------------
WRITING-MODE:TB-RL
This is also a proprietary property of Microsoft.
IE7 also has some additional properties that can trigger this property (not a complete list):
min-height: (any value)
max-height: (any value except none)
min-width: (any value)
max-width: (any value except none)
overflow: (any value except visible)
overflow-x: (any value except visible)
overflow-y: (any value except visible) 5
position:fixed
the problems caused by elemental haslayout are generally easy to find: the content is often misplaced or even completely invisible. To give a typical example, when an element contains floating or absolutely positioned content, it usually behaves strangely and wrongly, looking at the following code:
<div id= "Nofloatbox" >
<div id= "Floatbox" ></div>
</div>
The CSS code is as follows:
#nofloatbox {
border:1px solid #FF0000;
Background: #CCC;
}
#floatbox {
Float:left;
width:100px;
height:100px;
border:1px solid #0000FF;
Background: #00FF00;
}
IE displays results such as:
The non-floating div is visible without the height of the floating element inside, and its height is not calculated automatically. Let's add a zoom:1 to the non-floating div below, to trigger its Haslayout property to try, and the CSS code is as follows:
#nofloatbox {
border:1px solid #FF0000;
Background: #CCC;
Zoom:1;
}
#floatbox {
Float:left;
width:100px;
height:100px;
border:1px solid #0000FF;
Background: #00FF00;
}
save to refresh the IE browser window, such as:
&NBSP;
haslayout can also have an effect on inline elements, when the haslayout of an inline element is true, You can set the height and width of the inline element and get the desired effect. The following example:
code:
< Span style= "color: #cc0000; Font-size:medium; " ><p> today's <span style= "width:100px; height:50px; Background: #DDD; " > Weather </span> Nice </p>
&NBSP;
below gives span plus zoom:1; to trigger haslayout:
<p> today <span style= "width:100px; height:50px; background : #DDD; zoom:1; " > Weather </span> good </p>
It is important to note that Haslayout is a proprietary Microsoft thing, and for Firefox and other standards of compliance with the browser is invalid, and therefore not too dependent. Seemingly now IE8 have no need to deliberately to trigger Haslayout can get and Firefox consistent effect, do not know if IE8 has deprecated this attribute?
In fact, according to reasonable semantics, proper flow of documents, the correct standardization of the production of the page, in the various companies produced by the standard rendering of the browser, there is generally no problem of too many compatibility.
Generally, if the display does not match the expected effect due to layout, it will behave normally under FF, and error will occur under IE. At this point, you can try to trigger the Haslayout property of the parent container and its child containers, which can usually be debugged by adding zoom:1. Until you find the element that produces the problem, then make a targeted correction. The best way to do this is to set the dimension property on this element. However, there are times when it is inconvenient to specify a size attribute, and you can only find alternatives. For IE7, the best way is to set the minimum height property to 0; This technique is harmless because 0 is inherently the initial value of this property. And there is no need to hide this property from other browsers. The way to trigger an element haslayout in IE6 and earlier versions is to set the height property of this element to 1% if the overflow property is visible, and then hide this setting for other browsers. This technique is known as the Holly Hack.
A big evil source of understanding Haslayout--ie Browser CSS Bugs
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
