"Reprint" has the layout IE haslayout

We know that browsers have bugs, and Le on Windows seems to have more bugs than most browsers. One of the reasons Ie/win's clothing is different from other browsers is that the display engine uses an internal concept called layout. Since the cloth is a concept specifically for the internal working of the display engine, it is not necessary to understand it under normal conditions. However, the layout problem is that many Ie/win show the root cause of the bug, so it is helpful to understand the concept and how it affects CSS.

What is layout
IE on Windows uses layout concepts to control the size and positioning of elements. Elements that are called owning layouts (with layout) are responsible for the size and positioning of themselves and their child elements. If a new year's Day does not have a layout, then its size and position is controlled by the most recent ancestor element that owns the layout.

The IE display engine uses layout concepts to reduce its processing overhead. Under ideal conditions, all elements control their size and positioning. However, this can cause a lot of performance problems in IE. Therefore, the Ie/win development team decided to apply the layout only to those elements that actually needed it, so that the performance overhead could be reduced substantially.

The elements that have layouts by default include the following:

Body
HTML in standard mode
Table
TR, TD
Img
hr
Input, select, TextArea, button
IFRAME, embed, object, applet
Marquee
The layout concept is unique to I E on Windows, and it is not a CS S property. Although some CSS properties cause the meta-ffi to have a layout, the CSS towel cannot be explicitly set to announce the office. You can use JavaScript functions haslayout See if a meta-parent has a layout. If the element has a layout, the function returns true; Otherwise, the Falseo haslayout is a read-only property, so you cannot use JavaScript to select the row settings.

The following CSS properties will automatically enable the meta-Pro to have a layout ·

Position:absolute
Float:left or right
Display:inline-block
Width:any value
Height:any value
Zoom:any value (Microsoft property-doesn ' t validate)
WRITING-MODE:TB-RL (Microsoft property-doesn ' t validate)
What is the layout effect?
Layouts are the source of many ielwin that show bugs. For example, if a text paragraph is a floating element in a valley, then the desired text is centered around the element cable. However, on Windows 1E 6 and earlier napkins, if the paragraph has a layout (for example, because the height is set). Then it is limited to a rectangle, thus preventing the text from moving around the floating element (see Figure 9-5).

Figure Above: Expect text to surround adjacent floating elements, but on Ie/win, if the text element has a layout, it will not appear this way.

This can lead to a variety of problems between the floating cloth even worse, many people use IE as the master browser, they will mistakenly think this is the correct performance, when other browsers deal with Nim-moving elements in different ways, they will be puzzled.

Another question concerns how an element with layout determines its ruler, and if the content of the meta-Pro becomes larger than the element itself, the expected element flows out of the element. However, in IE 6 and earlier versions of Windows, elements that have layouts are mistakenly extended to accommodate the size of the content (see Ring 9-6).

Figure Above: Wrong extension with layout to fit content

This means that the width in Ie/win is actually more like min-width. This behavior is also the cause of many floating layouts being destroyed in Ie/win. When the contents of the float box are incorrectly forcing the width of the box to increase, the box is too large for the free space, so it falls to the other floating elements below.

Other issues include:

Elements that have a layout do not shrink.
The layout element Pro automatically makes the float disappear.
Relatively positioned elements do not have a layout.
The elements that have the layout are not superimposed between them.
On a block-level link that does not have a layout, the click Area overrides text Only.
In the next section, we'll discuss some of the most common browser bugs. You'll notice that many of the fixes for IE on Windows involve forcing elements to have layouts by setting properties. In fact, if you encounter a ie/wi n bug, one of the first things you should do is try to force Meta-Chong to have a layout by applying rules. Check to see if this fixes the problem.

If you wish to learn more about the internal haslayout properties of IE, I recommend reading "On have Layout" on http://tinyurl.com/acg78. "My translation article is here ie Haslayout detailed"

Common bugs and how to fix them
One of the most important skills of a CSS developer is the ability to discover common browser bugs. By understanding the various meta-cables that cause these bugs, you can find and fix them before they cause problems.

Double Blank Edge floating bug
One of the most common and easy-to-find bugs is a double-blank edge floating bug in IE6 and earlier versions. As the name implies, this Windows bug doubles the white edges on any floating element (see Figure 9-7).

Figure Above:ie/win Double blank floating bug schematic pavilion

This bug is easy to fix, and the display property of the element is set to inline. Because the element is floating, setting the show property to inline does not actually affect how it is displayed. However, this seems to prevent IE6 and lower versions on Windows from doubling all whitespace. This is a bug that is very easy to spot and fix: Whenever you float an element with a horizontal blank edge, you should naturally set the display property to inline.

3 Pixel text offset bug
Another very common I E 5-61win bug is the 3 pixel text offset bug. This bug is shown when the text is adjacent to the two floating elements. For example, suppose you float an element to the left, and you don't want the text in the adjacent paragraph to surround the floating element. You might apply a left blank edge to a paragraph whose width is equal to the width of the floating element:

. myfloat {float:left; width:200px;}
p {margin-left:200px;}

If you do this, there will be an inexplicable 3-pixel gap between the text and the floating element. (See Figure 9-8).

Figure Above:ie 5-6/win 3-pixel text offset bug

Fixing this bug requires a two-pronged approach. First, set any height to the element that contains the text. This forces the element to have a layout, which eliminates the text offset on the surface. Because IE6 and lower versions on Windows treat height as min-height, setting a small height does not affect the actual size of the elements in these browser napkins. However, this affects other browsers, so use Holly tricks to hide this rule from all other browsers except IE6 and earlier on Windows,

/* Hide from Ie5-mac. Only Ie-win sees this. \*/
* HTML p {height:1%;}
/* End Hide from Ie5/mac */

Unfortunately, doing so can lead to another problem. As you learned earlier, elements that have layouts are limited to rectangles and appear next to the floating cells instead of underneath them. Adding a 200-pixel blank edge actually creates a 200-pixel gap between the floating element and the paragraph in IE 5-6/win. To avoid this backlash, you need to reset the blank edge on IE 5-6/win to zero:

/* Hide from Ie5-mac. Only Ie-win sees this. \*/
* HTML p {height:1%; margin-left:0;}
/* End Hide from Ie5/mac */

The text offset was fixed, but now another 3 like a pro-gap appears, this time on a floating element. To get rid of this clearance, you need to set a negative 3-pixel right margin on the floating element:

/* Hide from Ie5-mac. Only Ie-win sees this. \*/
* HTML p {height:1%; margin-left:0;}
* HTML. myfloat {margin-right: -3px;}
/* End Hide from Ie5/mac */

If the floating element is anything other than an image, the problem has been fixed. However, if floating New Year's Day is an image, then there is a problem that needs to be addressed after putting it on. IE 5.x/win in the image of the left and right to add 3 like the pro gap. The IE6 does not change the blank edges of the image. Therefore, it is necessary to use another technique in IE 5.x/win up to 3 pixels of the clearance:

/* Hide from Ie5-mac. Only Ie-win sees this. \*/
* HTML p {height:1%; margin-left:0;}
* HTML img.myfloat {margin:0 -3px; ma\rgin:0;}
/* End Hide from Ie5/mac */

This solves the problem, but the way it is used is difficult to see and too complex. Therefore, it is best to put these rules into separate browser-specific style sheets, if possible. If you do this, the style sheet for Le 5.x on Windows is as follows:

p {height:1%; margin-left:0;}
img.myfloat {margin:0 -3px;}

The style sheet for IE 6 is as follows:

p {height:1%; margin-left:0;}
img.myfloat {margin:0;}

IE 6 Hide the cat bug
Another strange and annoying bug is IE6 's hide-and-Go (Peek-a-boo) bug, which is named because the text appears to disappear under certain conditions and appears only once before the new loading page. The condition of this bug is that a floating element is followed by a few non-floating elements, then a cleanup element, all of which are contained in a parent bundle that sets the background color or the image. If the cleanup element touches a floating element, the middle of the floating element appears to disappear, hiding behind the parent element's background color or image, and only re-appears when the page is refreshed (see Figure 9-10).

Figure Above:ie 6 's hiding cat bug

Absolute positioning in a relative container
I'm going to discuss the post-section of a major browser bug involving an absolutely positioned element in the relative positioning container. In the previous chapters you learned how useful it is to nest absolutely positioned elements in relative containers. However, IE 6 and lower versions have many bugs when using this technology.

The reason for these bugs is that relatively positioned elements do not get the Ie/win intrinsic Haslayout property. Therefore, they do not create a new positioning context, and all absolutely positioned elements are positioned relative to the window (see Figure 9-11).

Figure above:ie5.x the position of the absolute positioned element in the relative container is incorrect

In order to make IE 6 and lower on Windows behave correctly. You need to force a container with a relative position to have a layout. One way is to set the width and height explicitly on the container. However, it is often desirable to use this technique without knowing the width and height of the container, or in situations where these properties are required to remain flexible.

You can use the Holly tricks to provide a height for the container. This causes the container to have a layout. However, because elements in IE 6 and earlier versions do not scale correctly to fit their content, setting a small height does not affect the actual height.

/* Hides from Ie-mac \*/
* HTML. Container {height:1%;}
/* End Hide from Ie-mac */

Stop criticizing IE
IE is not enough for one by one bug browsers, so you might wonder why I only focus on IE bugs. Do not worry, I do not have to find a special and Microsoft, this is justified.

First of all, IE currently occupies the largest browser market share. Because there are many people using Ie,ie bugs are often found quickly and are well documented. When a significant CSS bug is found in IE, many developers try to find a fix or solution. Due to the popularity of IE, there are more IE bugs recorded and repaired than any other browser.

Another major problem is the rhythm of development. Firefox, Safari, and opera are constantly being updated, with the new version appearing at very high frequencies. Bugs are fixed almost once found, and new versions of the browser are published. Therefore, any Firefox or Safari bug discussed now may have been repaired by the next revision.

Such a high pace of development is really great, but it has its own problems. Developers have to deal with a browser version of not two or three, but 20 or 30. You cannot determine whether the user is using the latest version, which makes testing extremely difficult. On the other hand, IE hasn't released major revisions for nearly 5 years. As a result, bugs have more time to expose and developers have a stronger incentive to find ways to fix them.

Fortunately, IE 7 promises to become a more standards-compliant browser. Many well-known IE bugs have been resolved, and support for advanced CSS 2.1 selectors such as sub-selectors and attribute selectors is also increasing. As with all browsers, new bugs will appear, IE 7 is far from perfect. However, the quicker the people upgrade to modern browsers such as IE 7 and Firefox, the older browsers such as IE 5.0 will retire faster.

In this transition period, you might consider using Dean Edwards's IE 7 patch. This is a series of JavaScript files that enable IE 5-6/win to reach the level of IE 7. This includes improved selector implementations and many bug fixes. For more information on this patch, please visit http://dean.edwards.name/IE7/.

"Reprint" has the layout IE haslayout