What is HasLayout?

HasLayout is an attribute unique to IE. Many of the CSS bugs in IE are related to it. In IE, an element either sizes and organizes its own content or relies on a parent element to size and organize its content. When an element’s hasLayout attribute is true, it is responsible for sizing and positioning itself and its possible descendants. Although this means that the element has to pay more to maintain itself and its contents, rather than relying on the ancestor element to do so.

Which elements have the hasLayout attribute by default

In many cases, changing the HasLayout state to true can solve most of the IE display bugs. The bugs shown here generally refer to IE7 and the following browsers.

How to set up HasLayout?

Listed below are some CSS property values that trigger HasLayout.

  • position: absolute(Unuse: static)
  • float: left or right(Unused: None)
  • display: inline-block(Unused: other values)
  • width: Values other than AUTO(Unuse: Auto)
  • height: Values other than AUTO(Unuse: Auto)
  • zoom: Have a value(Unuse: normal or null values)

IE7 also has a few additional properties that trigger this property (an incomplete list) :

  • Min-height: (The online search said any value, but the practice found thatExcept for None and Auto)
  • Max-height: (any value except none and auto)
  • Min-width: 0px; min-width: 0px; min-width: 0pxExcept for None and Auto)
  • Max-width: 100%; clear: both;
  • Overflow: (any value except visible)
  • Overflow-x: (any value except visible)
  • Overflow-y: (any value except visible)
  • position: fixed

Js tests if an element has a layout

< div id = "menu" onclick = "javascript: alert (menu. CurrentStyle. HasLayout)" > this is the text content < / div >

Click on the DOM element with menu in Internet Explorer. If the element has a layout, it will pop up to true; otherwise it will pop up to false.

For example,

1. When an element contains floating or absolutely positioned content, it often behaves strangely and incorrectly. See the following code:

<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;
}

The result for Internet Explorer looks like this:

The height of the float element in the div is not automatically calculated. Let’s add a zoom to this non-floating div :1; To trigger its hasLayout property, try the following CSS code:

#nofloatbox {
    border: 1px solid #FF0000;
    background: #CCC;
    zoom:1;
}

The results in IE7 and lower versions of the browser look like this:

Other standard browsers can simply clear the float of the child element and add overflow:hidden to the parent element.

2. HasLayout also works for inline elements. When the inline element’s hasLayout is true, you can set the height and width of the inline element and get the desired effect (here for IE7 and lower versions) as follows:

<p style=" max-width: 100px; height: 50px; background: #DDD;" > weather </span> nice </p>

The browser will look like this:

Let’s add zoom to the span: 1; To trigger hasLayout:

<p style=" max-width: 100px; height: 50px; background: #DDD; Zoom :1"> weather </span> nice </p>

The result in IE7 looks like this:

Note: It’s important to note that HasLayout is proprietary to Microsoft and doesn’t work with standards-compliant browsers such as Firefox and Chrome, so don’t rely on it too much. In fact, with reasonable semantics, proper document flow, and correct standardization of the produced pages, there are generally not many compatibility problems in the standard rendering browsers produced by various companies.