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.
Haslayout!
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:
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 ......")
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
