Home > Developer > JavaScript
CSS knowledge point: hasLayout of IE browser, source of bug in earlier IE versions, csshaslayout
What is hasLayout?
HasLayout isIEUnique attribute. Many css bugs in ie are closely related to them. In ie, an element either calculates the size and organization of its own content, or relies on its parent element to calculate the size and organization content. When the hasLayout attribute value of an element is true, it is responsible for calculating and locating the size of itself and its potential child elements. Although this means that this element requires more cost to maintain itself and its content, rather than relying on the ancestor element to do this.
In ie, the following defaulthasLayout=trueElement<table> <td> <body>
In many cases, changing the hasLayout status to true can solve the problems shown in most ie scenarios.bug.
The bug shown here generally refers to IE7 and the following browsers.
How to Set haslayout? The following lists some CSS attribute values that can trigger hasLayout.
Position:absolute(Cancel using: static)
Float:left or right(Cancel use: none)
Display: inline-block(Cancel: other values)
Width:Values except auto(Cancel using: auto)
Height: Values except auto(Cancel using: auto)
Zoom:Value(Cancel use: normal or null)
Ie7 also has some additional attributes that can be triggered (incomplete list ):
Min-height:BesidesNone and auto)
Max-height: (any value except none and auto)
Min-width:BesidesNone and auto)
Max-width: (any value except none and auto)
Overflow: (any value except visible)
Overflow-x: (any value except visible)
Overflow-y: (any value except visible)
Position: fixed
Js to test whether an element has layout <Div id = "menu" onclick = "javascript: alert (menu. currentStyle. hasLayout)"> This is text content </div>
Click the DOM element with the ID of menu in IE. If the element has layout, the displayed result istrueOtherwisefalse.
Example 1. When an element contains floating or absolutely positioned content, it usually shows strange and wrong behavior. Look at the following code:
Html:
<div id="nofloatbox"> <div id="floatbox"></div></div>
Css:
#nofloatbox { border: 1px solid #FF0000; background: #CCC; zoom:1;}#floatbox { float: left; width: 100px; height: 100px; border: 1px solid #0000FF; background: #00FF00;} Results obtained by IE:
It can be seen that the non-floating div is not supported by the height of the floating element in it, and its height is not automatically calculated. Next we will add a zoom: 1 to the non-floating div to trigger its hasLayout attribute. the css code is as follows:
#nofloatbox { border: 1px solid #FF0000; background: #CCC; zoom:1;} Results obtained in IE7 and earlier browsers
Other standard browsers can clear the floating of child elements and add them to the parent element.overflow:hiddenYou can.
2.hasLayoutForInline ElementIt can also have an effect. When the hasLayout of an inline element is true, you can set the height and width for this inline element and get the expected effect ,(Internet Explorer 7 and earlier browsers) As follows:
<P> today's <span style = "width: 100px; height: 50px; background: # DDD;"> good weather </span> </p>
Browser effect:
Addzoom: 1; To trigger hasLayout:
<P> today's <span style = "width: 100px; height: 50px; background: # DDD; zoom: 1"> good weather </span> </p>
Effect in IE 7 Browser:
Note: hasLayout is proprietary to Microsoft.firefox,ChromeAnd so on. In fact, according to the rational semantics, the appropriate document stream, and the pages produced by correct standardization, under the standard rendering browsers produced by various companies, generally, there will be no compatibility issues.
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
