Layout ie haslayout

Document directory

• What is layout?
• What is the layout effect?
• Common Bugs and Solutions
• Stop criticizing IE

This article from http://adamghost.com/2008/12/ie-haslayout-%E8%AF%A6%E8%A7%A3/

We all know that browsers have bugs, and there seems to be more bugs on Windows than most browsers. One of the reasons why IE/win is different from other browsers is that the Display engine uses an internal concept called layout. Because the layout is a concept dedicated to the internal working mode of the display engine, you do not need to know it normally. However, the layout problem is the root cause of many IE/win bugs, so it is helpful to understand this concept and how it affects CSS.

What is layout?

On Windows, ie uses the Layout Concept to control the size and positioning of elements. Elements known as have 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, its size and position are controlled by the nearest ancestor element with the layout.

The IE Display engine uses the Layout Concept to reduce its processing overhead. Ideally, all elements control their own sizes and positioning. However, this will 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 need it, so as to fully reduce the performance overhead.

By default, layout elements include:

• 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 attribute. although some CSS attributes make the element layout, the layout cannot be explicitly set in the CSS towel. you can use the JavaScript function haslayout to check whether a MetaStore has a layout. if the element has a layout, this function returns true; otherwise, falseo haslayout is a read-only attribute, so you cannot use JavaScript to select rows.

Setting the following CSS attributes will automatically layout the elements ·

• 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?

Layout is the root cause of many ielwin display bugs. For example, if a text paragraph is subject to a float, you expect the text to be centered around the text. However, in Windows 1E 6 and earlier versions, if the Section has a layout (for example, because the height is set ). then it is restricted to a rectangle, so it prevents the floating elements of the text country from <see Figure 9-5 ).

Figure above:It is expected that the text will be centered on adjacent floating elements. However, if the text element has a layout on IE/win, it will not be displayed like this.

This will lead to various problems with floating cloth. Worse, many people use IE as the main browser, and they will mistakenly think that this is the correct result, when other browsers process floating elements in different ways, they will be puzzled.

Another question is how to determine the ruler of an element with a layout. If the content of an element is larger than that of the element, the element is expected to flow out of the element. however, in IE 6 and earlier versions of Windows, layout elements are incorrectly scaled to adapt to the content size (see Figure 9-6 ).

Figure above:Incorrect extensions with layout to adapt to content

This means that the width in IE/win is actually more like Min-width. This behavior is also caused by the destruction of many floating la s in IE/win. When the content of the Floating Box mistakenly forces the increase of the width of the box, the box is too large for the available space, so it drops to other floating elements below.

Other problems include:

• Elements with layout are not reduced.
• The layout element automatically removes floating traffic.
• The relative positioning element does not obtain the layout.
• Do not overlay the elements with la S.
• On a block-level link that does not have a layout, click the area to only overwrite the text.

In the next section, we will discuss some of the most common browser bugs. You will notice that many methods to fix ie on Windows involve forcing elements to have a layout by setting properties. In fact, if you encounter an IE/wi n bug, one of the first things you should do is try to apply rules to force yuan Chong to have a layout. Check whether the problem can be fixed.

If you forget to learn more about the internal haslayout attribute of IE, I suggest you read the feature on having layout on http://tinyurl.com/acg78 ". [Here is the explanation of my translation Article ie haslayout]

Common Bugs and Solutions

One of the most important skills of CSS developers is the ability to discover common browser bugs. You can discover and fix these bugs before they cause problems.

Double blank side floating bug

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

Figure above:Double blank floating bug in IE/win

This bug can be easily fixed by setting the display attribute of the element to inline. Because the element is floating, setting the display attribute to inline does not actually affect the display mode. However, this seems to prevent IE6 and earlier windows from doubling all blank spaces. This is a bug that is very easy to detect and fix: Whenever elements with horizontal blank edges are floating, the display attribute should be set to inline naturally.

3 pixel text offset bug

Another very common I e-5-61win bug is the 3 pixel text offset bug. This bug is displayed when the text is adjacent to two floating metadata. For example, assume that the-element is moved to the left, and the text in the adjacent section is not expected to move around the floating element. You may 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; }

In this case, there will be an inexplicable 3-pixel gap between the text and floating elements. (See Figure 9-8 ).

Figure above:3 pixel text offset bug in IE 5-6/win

To fix this bug, you must take a two-pronged approach. First, set any height for the elements that contain text. This forces the element to have a layout, which removes the text offset on the surface. Because IE6 and earlier versions on Windows treat height as Min-height, setting a small height does not affect the actual size of elements in these browser towels. However, this will affect other browsers, so we need to use the holly trick to hide this rule for all browsers except IE6 and earlier versions on Windows,

/* Hide from IE5-Mac. Only IE-Win sees this. \*/
* html p { height: 1%; }
/* End hide from IE5/Mac */

Unfortunately, doing so will lead to another problem. As I learned earlier, elements with la s are restricted to Rectangles and appear next to floating metadators rather than under them. Adding a blank edge of 200 pixels will actually generate a gap of 200 pixels between floating elements and paragraphs in IE 5-6/win. To avoid this gap, 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 is fixed, but now another 3-image gap occurs, this time on floating elements. To remove this question, you need to set a 3-pixel right blank edge with a negative value 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 the image, the problem has been fixed. However, if the floating New Year's Day is an image, there is another problem to be solved. IE 5.x/ win adds a 3-image gap between the left and right sides of the image. IE6 does not change the blank side of the image. Therefore, you need to use another trick to remove the 3 pixel gap on IE 5.x/ win:

/* 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 method is ugly and complicated. Therefore, if possible, it is best to put these rules into a separate browser-specific style sheet. 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 Dodge bug

Another strange and annoying bug is IE6's peek-a-boo bug. The reason for this is that the text seems to have disappeared under certain conditions, the new page appears only when it is loaded. The condition for this bug is that a floating element is followed by some non-floating elements, and then a cleaning element, all these elements are included in a parent metabundle with a background color or image reading. If the cleaning element encounters a floating element, the floating element in the middle disappears and hides the background color or image of the parent element, it appears only when the page is refreshed (see Figure 9-10 ).

Figure above:Internet Explorer 6 bug

Relative absolute location in the container

A major browser bug after the section I will discuss involves absolute positioning elements in relative locating containers. In the previous chapter, you learned how useful it is to nest absolutely positioned elements in relative containers. However, there are many bugs in IE 6 and earlier versions when using this technology.

The cause of these bugs is that the relatively located element does not obtain the internal haslayout attribute of IE/win. Therefore, they do not create a new positioning context. All absolute positioning elements are located relative to the window (see Figure 9-11 ).

Figure above:The positioning method of ie5.x relative absolute positioning elements in the container is incorrect.

To make IE 6 and earlier versions on Windows behave correctly. It is necessary to force the corresponding containers to have a layout. One way is to explicitly set the width and height on the container. However, you often want to use this technology when you do not know the width and height of the container, or when you need these attributes to be flexible.

The Holly trick can be used to provide a height for the container. This gives the container a layout. However, because the elements in IE 6 and earlier versions are incorrectly extended to adapt to 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 the only browser with bugs, so you may wonder why I only pay attention to IE bugs. You don't have to worry about it. I am not dedicated to having trouble with Microsoft. There is a reason to do so.

First, ie currently occupies the largest browser market share. Because many people are using IE, ie bugs are often quickly discovered and well recorded. When a major CSS bug is found in IE, many developers will try to find a solution or solution. Due to the popularity of IE, more ie bugs are recorded and fixed than any other browser.

Another major problem is the pace of development. Browsers such as Firefox, Safari, and opera are constantly updated, and new versions appear frequently. The bug was fixed almost once it was discovered and a new version of the browser was released. Therefore, any Firefox or Safari bug discussed now may have been fixed by the next revision.

Such a high development pace is really great, but there are also their own problems. Developers should deal with 20 or 30 browser versions instead of two or three. You cannot determine whether the user uses the latest version, which makes the test extremely difficult. On the other hand, ie has not released major revisions for almost five years. Therefore, the bug can be exposed more time, and developers are more motivated to find a solution.

Fortunately, IE 7 promises to become a more standard browser. Many well-known ie bugs have been solved, and support for advanced CSS 2.1 selectors (such as child selectors and attribute selectors) is also being added. Like all browsers, new bugs will also emerge, and IE 7 is far from perfect. However, the faster people upgrade to modern browsers such as IE 7 and Firefox, the faster old browsers such as IE 5.0 will retire.

In this transitional period, you can consider using the Dean Edwards IE 7 patch. These are a series of JavaScript files that enable ie 5-6/win to be close to IE 7, including improved selector implementations and many bug fixes. For more information about this patch, visit http://dean.edwards.name/ie7 /.