Text-align:justify implementation of text justification ie_javascript techniques

We are familiar with the text-align, but it has a justify attribute, usually rarely used, is little known. Justify is a kind of text on both sides of the layout, generally used in books and magazines typesetting, reasonable use of text-align:justify will sometimes save a lot of development time.

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

What is Haslayout?

Haslayout is an internal component of the Windows Internet Explorer rendering engine. In Internet Explorer, an element either calculates size and organizes itself on its own content, or relies on the parent element to compute dimensions and organize content. To adjust these two different concepts, the rendering engine takes the Haslayout attribute, and the property value can be true or false. When the Haslayout property value of an element is true, we say that the element has a layout (layout)

When an element has a layout, it is responsible for the size calculation and positioning of its own and possible descendant elements. In simple terms, this means that the element needs to be more costly to maintain itself and its contents, 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 "owns layout" or "gets layout", or that 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 a layout by default or an element that gets layout by setting some CSS properties. Through IE Developer Toolbar can see whether IE HTML element has haslayout, under IE Developer Toolbar, has the haslayout element, usually displays as "Haslayout =-1".

In particular, haslayout in IE 8 and after the IE version has been abandoned, so in actual development only for IE 8 browser for some elements trigger haslayout.

An element triggering haslayout affects the size and positioning of an element, which consumes more system resources, so the IE designer defaults to only a subset of the elements that trigger the haslayout (that is, the default part of the element triggers the haslayout, which is basically entirely by the developer through a specific C SS triggers are not the same), this part of the element is as follows:

* Body and HTML
* table, TR, TH, TD
* img *
HR
* input, button, file, select, textarea, fieldset
* Mar Quee
* frameset, frame, iframe
* objects, applets, embed

How to motivate haslayout?

Most IE displays errors, which can be corrected by stimulating the haslayout attribute of the element. You can set the CSS dimension property (Width/height) to fire the element's haslayout so that it "owns the layout."

As shown below, you can do this by setting the following CSS properties.

* 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 (incomplete 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

The 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 spans, or display:inline elements),

Width and height trigger haslayout only under ie5.x and IE6 or later versions of 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 order the element to have a layout in this case.
Zoom can always trigger haslayout, but it is not supported in IE5.0. It is recommended that you use Zoom:1 to trigger the haslayout of elements.

If an element with "layout" is display:inline at the same time, its behavior is similar to that of the standard Inline-block: In a paragraph, like normal text, in a horizontal direction and a continuous arrangement, affected by the vertical-align, And the size can be adaptively adjusted according to the content. This also explains why inline elements in Ie/win alone can contain block-level elements and less problematic, because in other browsers display:inline is inline, unlike Ie/win, once the inline element has layout, it becomes inline-block.

Debugging and solving of haslayout problem

When the Web page in IE has abnormal performance, you can try to motivate 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 trigger the haslayout of elements without affecting the existing environment. And once the problem disappears, it can basically be judged as the cause of the haslayout. You can then modify the problem by setting the corresponding CSS properties. 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 commonly used method is called the holly Crack (Holly hack), which sets the height of this element to 1% (height:1%;). Note that this method fails when the overflow property of this element is set to visible. Or use IE's conditional annotation.

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

Common bugs caused by haslayout problems
IE6 and lower double margin floating bugs
Bug fixes: display:inline;

Ie5-6/win 3-pixel offset bug
Bug fixes: _height:1%;

IE6 's hiding Cat (Peek-a-boo) bug
Bug fixes: _height:1%;

This lists some of the effects that trigger the haslayout element

1. Block outer margin folding

The two-connected Div is superimposed on the vertical outer margin, and this does not happen between the elements that trigger the haslayout, as shown in the following figure:

In the example above, the three div each contains a P element, and the three Div and its containing p elements have the top and bottom margins, but only the third Div has a margin that is not folded with the outer margin of its child element p. This is because the third div triggers the haslayout using zoom:1, preventing it from collapsing with its child elements outside the margin.

In addition, the BFC of the Overflow:hidden triggering element is used in the example, which utilizes the BFC to prevent the outside folding to achieve the unity of the elements in IE and modern browsers.

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

Effect as shown:

In the example above, 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, height 0, and the top and bottom borders overlap. The second Div, which uses zoom:1 to trigger the haslayout, can contain floating elements so that the height is displayed correctly and the border position is normal.

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

3. Background image display problem

The element background image is not displayed correctly is one of the most common problems in the Web page code refactoring, in IE 7 and below the IE version, not set height, width of elements often can not display the background image (background color is normal), this is actually related to Haslayout. The actual situation is that elements that do not trigger haslayout cannot display a background image, as mentioned above, triggering haslayout means that the element has a layout, in other words, the element that owns the layout can display the background image correctly. The following figure:

The two div above has a background image set, but only the second div with zoom:1 triggers the haslayout to display the background image correctly.

In this example there is no BFC of the triggering element because in modern browsers the element itself does not have a background image to display the problem.

This article describes text-align:justify to achieve the text at both ends of the compatible IE, I hope you like.