IE compatibility problem and its processing

1. Under IE6, the sub-elements can open up the parent-set width and height
Minimum height under 2.ie6, elements with a height of less than 19px will be treated as 19px under IE6

Solution: Overflow:hidden;

1px dot Line not supported under 3.IE6

4. The parent has a border under IE6, which may cause the margin value of the child element to be invalidated
WORKAROUND: Trigger the parent's haslayout

5.
Do not write the document declaration under IE will enter the box model of the strange analysis;
Weird parsing of box models:

Weird box model
Width= Visible Width
Content=width-padding-border

6. Under IE6 label compatibility: Workaround <script src= "Html5shiv.js" ></script> create new tag to upload files;

7.ie7 and IE7 prior to the IE, only support for a tag set pseudo-class, and only support l-v-h-a these four pseudo-class
Workaround: JavaScript

8.ie6,7, Inline-block has no effect on the block label.

9. After the ie6,7 element floats, if the width is fixed, you must remember to set the width, if the width needs to open the content, give him the inside of the block elements are added floating

10. The elements that are needed and in the same row are best floated

11.ie6,7 Li itself does not float, but the content is floating, Li will be more than a few pixels below the gap
Workaround:
1. Give Li a float
2. Add vertical alignment to Li

12. When the gap problem under Li and the minimum height problem in the IE6 coexist, add a float to Li

Double-sided bug under 13.ie6

Under IE6, the block element is floating and has a horizontal margin, and the horizontal margin value is magnified to twice times.

Workaround: Display:inline

14. Under IE6, the difference between the width of the parent and the width of each line element is more than 3px, and the last line margin fails

15. Two floating elements have comments or inline elements in the middle and the width of the parent is not more than 3px, the text is copied

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

Calculate your own size based on your own content size or the size of your parent

Display:inline-block
Height: (any value except Auto)
float: (left or right)
Position:absolute
Width: (any value except Auto)
Zoom: (any value except normal)

IE7 and above
* 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

17.ie6 Implementing triangles
border:1px dashed #000;

CLEAR{ZOOM:1: Zoom, zoom
19. The ie6,7 element has a relative position on it, and the parent's overflow does not effect it.
Workaround: Also add relative positioning to the parent
In IE6, the positioning element disappears when the floating element and the absolute position element are and are related.
WORKAROUND: Give it the parent package a DIV
? Under IE6, the width (height) of the absolute position parent is odd, and the element's right (bottom) has a 1px bias.
In IE6, the negative value of margin is used to move the element out of the parent part, and the removed part is truncated by the parent;
Workaround: Add relative positioning to elements
20. Forms
? label label plus for property
Focus Problem Outline:none
? input up and down 2px voids
Workaround: Float to input
? input is added under IE6: Border:none no effect
Workaround:
①border:0;
② resetting the background of input
? Enter the type of form control under ie6,7, and when you enter text, the background map moves with it.
Workaround: Add the background to the parent
21.IE6, PNG transparency is not supported;
Solution: JS processing, uploaded JS file;
Filter:
_background:none;_filter:progid:dximagetransform.microsoft.alphaimageloader (src= "Img/png.png", sizingMethod= " Crop

22. Conditional Comment Statements
<!--[If ie]>
This is IE
<! [endif]-->
<!--[if IE 9]>
9
<! [endif]-->
23.ie hack
ie recognition after IE8
IE10 and IE10 after the IE recognition \9
IE recognition prior to IE7 and IE7 * +
IE6 and IE6 before the IE identification _
!important can change the default CSS style precedence rules so that the bar Style property declaration has the highest priority

IE compatibility problem and its processing