Text-align:justify implement text justification layout, compatible with IE

To better understand CSS, especially the rendering of CSS under IE, Haslayout is a very necessary concept to be thoroughly understood. Most IE
The error in the display is derived from haslayout.

What is Haslayout?

Haslayout is an internal component of the Windows Internet Explorer rendering engine. In Internet Explorer, 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. To adjust these two different concepts, the rendering engine takes the Haslayout property, which can be either true or false. When the Haslayout property value of an element is true, we say that the element has a layout

When an element has a layout, it is responsible for sizing and positioning itself and possible descendant elements. In short, 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. Therefore, some elements will have a layout by default. When we say that an element "has layout" or "Get Layout", or an element "has layout", we mean that its Microsoft proprietary attribute Haslayout is set to true. A "layout element" can be an element that has layout by default or an element that gets layout by setting some CSS properties. Through IE Developer Toolbar can see whether the HTML element under IE has haslayout, under IE Developer Toolbar, have haslayout elements, usually displayed as "haslayout =-1".

In particular, haslayout in IE 8 and after the IE version has been discarded, so in real development only for the browser under IE 8 for some elements to trigger haslayout.

An element trigger haslayout will affect the size and positioning of an element, which consumes more system resources, so IE designers will default to only a subset of the elements trigger haslayout (that is, the default part of the element will trigger Haslayout, which is basically entirely by the developer BFC with a specific C The SS trigger is not the same), this element is as follows:

* Body and HTML
* table, TR, TH, TD
* img
* HR
* Input, button, file, select, textarea, fieldset
* Marquee
* Frameset, Frame, IFRAME
* Objects, applets, embed

How to inspire Haslayout?

Most IE display errors can be corrected by firing the Haslayout attribute of the element. You can fire the haslayout of an element by setting the CSS Dimension property (Width/height), so that it "owns the layout." You can do this by setting the following CSS Properties , as shown below.

* Display:inline-block
* Height: (any value except Auto)
* Float: (left or right)
* Position:absolute
* Width: (any value except Auto)
* WRITING-MODE:TB-RL
* Zoom: (any value except normal)

Internet Explorer 7 also has some additional attributes (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)
* position:fixed

Overflow-x and overflow-y are attributes in the CSS3 box model and are not widely supported by browsers.

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

• Width and height only trigger haslayout under ie5.x and IE6 or later in quirks mode. For IE6, if the browser is running in standard compatibility mode, the inline element ignores the width or Height property, so setting width or height cannot be ordered in this case to have layout of the element.
• zoom can always trigger haslayout, but it is not supported in IE5.0. It is recommended to use ZOOM:1 to trigger the haslayout of an element.

If the element with "layout" is display:inline at the same time, its behavior is similar to that of the standard Inline-block: in the same way as normal text in the paragraph, the horizontal and continuous arrangement, affected by vertical-align, And the size can be adjusted according to the content adaptive. This can also explain why inline elements in Ie/win alone can contain block-level elements that are less problematic, because Display:inline is inline in other browsers, unlike Ie/win, which becomes inline-block once inline elements have layout.

The debugging and solving of haslayout problem

When the Web page in IE has abnormal performance, you can try to fire haslayout to see if the problem lies. A common method is to set zoom:1 for an element of CSS. Zoom:1 is used because, in most cases, it can fire the haslayout of an element without affecting the existing environment. And once the problem disappears, that's basically the reason why you can judge Haslayout. You can then fix the problem by setting the appropriate CSS properties. The first thing to consider is the Width/height attribute of the set element, followed by other attributes.

For IE6 and earlier, the usual method is known as the Holly Hack (Holly hack), which sets the height of the element to 1% (height:1%;). It is important to note that this method is invalidated when the overflow property of this element is set to visible. Or use the conditional comment of IE.

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

Haslayout problems caused by common bugIE6 and lower versions of double blank Edge floating bug

Bug fix: display:inline;

Ie5-6/win 3-pixel offset bug

Bug fix: _height:1%;

IE6 's hiding Cat (Peek-a-boo) bug

Bug fix: _height:1%;

Some of the effects of triggering haslayout elements are listed here

1. Prevent margin folding

The two connected Div will overlap on the vertical margin, and there will be no such occurrence between the elements that trigger the haslayout, such as:

example, three div each contains a P element, three Div and its containing p elements have the top and bottom margins, but only the margin of the third Div is not folded with the margin of its child element p. This is because the third Div uses zoom:1 to trigger the haslayout, which prevents it from collapsing from its child elements.

In addition, the example also uses the Overflow:hidden trigger element of the BFC, which uses the BFC to prevent the collapse of the margin to achieve the element in IE and modern browser performance unified.

2. Can contain floating child elements, that is, when the height is calculated including its floating child elements

Effect

Example, there are two div, each containing a floating p element, but the first Div is actually judged by the browser to have no height and width, that is, the height is 0, and the upper and lower borders overlap. The second DIV uses zoom:1 to trigger the haslayout, which can contain floating elements, so it can correctly show the height and its border position is normal.

This example also uses the Overflow:hidden trigger BFC, similar to the previous example, which takes advantage of the feature that BFC can contain floating child elements to achieve unity in the performance of the elements in IE and modern browsers.

3. Background image display problem

Element background map is not displayed correctly is one of the most common problems in Web page code refactoring, in IE version 7 and below, not set height, width of the elements often can not display the background image (the background color is displayed normal), which is actually related to Haslayout. The actual situation is that the element without triggering the haslayout cannot display the background graph, as stated above, triggering haslayout that is to make the element own the layout, in other words, the elements that have the layout can correctly display the background map. Such as:

Two div sets the background graph, but only the second div that triggers haslayout with zoom:1 will display the background image correctly.

In this example, there is no BFC to trigger the element, because in modern browsers, the element itself does not have a background graph showing the problem.

As can be seen in the first to second example above, in order to make the element in IE (including low

Text-align:justify implement text justification layout, compatible with IE