[Uncle IE's mouth is tilted]-clinical CSS bug table caused by haslayout

Source: Internet
Author: User

Note: This article from http://www.cnblogs.com/ccto/archive/2013/03/07/2948630.html

Uncle IE is not suffering from this SLB-eye problem for a day or two. When we pull it out for a test, it makes everyone smile, and it's just a grin ......

Ah, no way. Who makes this kind of browser on the Chinese market .....(Follow ie678 death rate)

Read, read, extract, record, and practice one by one. Finally, I have a deep understanding of this stinking problem.


First, define:

It is a special attribute of IE. It determines whether an element calculates the size and organization of its own content, or relies on its parent element to calculate the organizational content. To distinguish these two concepts, the rendering engine uses the haslayout attribute, true or false. When the attribute is true, we say that this element triggers the layout (layout ).

Tags with haslayout attributes:

    • <HTML>, <body>
    • <Table>, <tr>, <TD>, <TD>
    • <HR>
    • <Input>, <button>, <SELECT>, <textarea>, <fieldset>, <legend>
    • <IFRAME>, <embed>, <Object>, <APPLET>
    • <Marquee>

What is the meaning of this attribute?

When layout of an element object is activated, it is located independently of its child elements and its size calculation, that is, its layout, therefore, the browser will consume more costs to process layout elements. To improve the performance, ie has such a private attribute.

CSS features that can trigger haslayout:

Display: inline-blockheight :( any value except auto) width :( any value except auto) float :( left | right) position: absolutewriting-mode: TB-rlzoom: (any value except normal)

IE7 can trigger CSS features of haslayout:

Min-Height: (any value) min-width: (any value) max-Height: (any value except none) max-width: (any value except none) overflow :( any value except visible, used only for block-level elements) overflow-X: (any value except visible, used only for block-level elements) overflow-Y: (any value except visible, used only for block-level elements) position: fixed

Let's take a look at the clinical manifestations of oblique eyes.(I personally test the following content)

  Problem Browser Demo Solution
1 Input [Button | submit] is not centered IE8 Bug | fixed Add width
2 Body {overflow: hidden;} does not remove the scroll bar IE6/7 Bug | fixed Changed to HTML {overflow: hidden ;}
3 Labels with haslayout have a height IE6/7 Bug | fixed Add _ overflow: hidden; * Height: 0
4 When the form> [haslayout] element has margin-left, the [input | textarea] In the child element shows 2 × margin-left IE6/7 Bug | fixed Form> [haslayout element] {margin-left: width ;}
Form Div {* margin-left: Width limit 2 ;}
5 When the sub-element is position: relative, setting overflow: [hidden | auto] for the parent element is equivalent to setting position: visible for the sub-element; IE6/7 Bug | fixed Set position: relative for the parent element;
6 Chaotic float in the list: When an image is floating in the list, the image overflows to a normal location; or there is no list-style IE8 Bug | fixed Replace list-style with the background image
7 Th does not automatically inherit the text-align of the upper-level element. IE8 Bug | fixed Add text-align: Inherit to th;
8 The maximum number of styles (including link/style/@ import (Link) can be: 32. IE6-8 -Common sense In 99.99% cases
9 The color in the PNG image is the same as that in the background color, but different values are displayed. IE6-7 Bug | fixed Remove gamma profiles from images using pngcrush
10 Margin: 0 auto; the block element cannot be horizontally centered. IE6-8 Bug | fixed Add a width to the block element
11 Use the pseudo class: first-line |: First-letter. The attribute value appears! Important will invalidate the attribute IE8 Bug | fixed ! Important is edevil, don't use it anymore
12 : First-letter is invalid. IE6 Bug | fixed Move: First-letter to the closest place to {}, such as H1, P: First-letter {}, rather than P: First-letter H1 {}
13 Position: absolute element, a display: block. When it is not: hover, only the text can be clicked. IE6/7 Bug | fixed Add background to A. if the background is transparent, use background: URL ('cached file links on any page'). We do not recommend Background: URL (#) [Official solution], because it will add an HTTP request
14 Invalid DT, DD, and Li background IE6 Bug | fixed DT, DD, Li {position: relative ;}
15 <NoScript/> the style of the element is displayed when Javascript is enabled. IE6-8 Bug | fixed Add display: none to <NoScript/> using JS;
16 Elements in Li deviate from baseline to drop-down IE8/9 Bug | fixed Set display: inline or float: [direction] for Li
17 List-style of Li in the list is not displayed IE6/7 Bug | fixed Add margin-left to Li and leave space for display (not to UL)
18 The image cannot be vertically centered. IE6/7 Bug/fixed Add an empty tag and assign it to "layout", for example, display: inline-block;
19 You cannot customize pointer styles. IE6-8 Bug | fixed Set absolute path for pointer File
20 The height exceeds the height defined by height. IE6 Bug/fixed Add _ overflow: hidden; (recommended) or _ font-size: 0;
21 The width exceeds the width defined in width. IE6 Bug/fixed Add _ overflow: hidden;
22 Double margin IE6 -Common sense Add display: inline to the float Element
23 Hidden negative margin values: Non-haslayout elements in the parent element of haslayout. When the negative margin is used, the parts beyond the parent element are invisible. IE6/7 Bug/fixed Remove the haslayout of the parent element; or assign haslayout to the child element and add position: relative;
24 Set the text of one of the two floating elements to italic, and the other to drop down under the italic text element. IE6 Bug/fixed Add overflow: hidden to elements with italic text;
25 3px interval: the element after the float element has a 3px interval. IE6 Bug/fixed Because it is 3px, use brute force cracking, such as _ margin-left:-3px, or set float.
26 Text-align affects block-level elements IE6/7 Bug/fixed Sort your float, or set text-align separately.


(PS: If you want to learn how to use IE, in addition to being powerful, you also need to pray together silently: "IE6 is dying, XP is dying ......")

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.