A summary of IE6 compatibility issues

1. Double-sided bug under floating compatibility 1.1ie6

Under IE6, when the block element has floating and horizontal margin, the horizontal margin value of the element on the top edge is magnified to twice times

Solution: Display:inline;

1.2ie6,7 under Li's Gap

Under the ie6,7 Li itself does not float, but Li content is floating, Li will produce a 4px gap below

WORKAROUND: 1. Add float to Li (but width becomes self-adapting content, so widen)

2. Add Vertical-align:top/middle/bottom to Li;

PS: When the Li Gap problem, and the minimum height problem are at the time, can only be used to Li plus floating method.

1.3ie67 clear float need to trigger haslayout before you can

. Clear:after{content: ';d isplay:block;clear:both;}

. Clear{zoom:1;}

After pseudo-class: add content at the end of the element;

: after{content "added content";} Incompatible under ie6,7

Zoom Scale

A, trigger IE under the haslayout, so that the elements according to their own content to calculate the width of high.

B, FF does not support;

1.4ie6,7 the left element floats, the right element passes the margin and to a row, a 3 pixel bug appears.

Workaround: By floating and in a row

1.5 when the floating element and the absolute positioning element are side-by-side relations, the absolutely positioned element disappears under IE6

Workaround:

Give the positioning element a div for the outer bread

1.6 Text overflow bug under IE6

When the width of the child element differs from the parent's width by less than 3px, the IE6 text overflows when there are comments or inline elements in the middle of the two floating elements.

Workaround: Use div to wrap comments or inline elements in Div.

1 <style> 2  3. wrap{width:300px;} 4  5. Left{float:left;} 6  7. Right{width:300px;float:right;} 8  9 </style>10 <div class= "wrap" >12 <div class= "left" ></div>14     <div><!--IE 6 text overflow bug--><span></span></div>16     <div class= "right" > Fandesavan de Savan de Sa </div>18 </div>

2. Positioning problem 2.1IE6 The following parent must contain children, and when the child height is higher than the parent, the child will open the parent height

Workaround: Add Overflow:hidden to the parent level;

Problem: When a child has position:relative, the parent's overflow is relative that is not wrapped by the child. (Workaround: Add a position to the parent;)

2.2position:absolute; The odd question of width and height

The parent width of the anchored element under IE6 is odd, so both right and bottom of the positioned element under IE6 have a 1-pixel bias.

2.3 Fixed positioning IE6 not compatible with 3. Form Issue 3.1 ie6,7 a form control with a type of input below the 1px gap

Workaround: Add float to input

3.2 Enter the type of form control under ie6,7 and add border:none;

WORKAROUND: Reset the background or border:0 of input;

3.3 When Inline-block and Text-indent meet in IE6, 7

When the text-indent is negative, the element shifts to the left and the element shifts to the right when the text-indent is positive. In this case, the offset of the element is determined by the text-indent and margin values, such as: margin-left:-10px; text-indent:10px equivalent to margin-left:0; The text-indent:0 element has no offset.

The default display for input, select, button, textarea is Inline-block.

Solution One: ie67, with Display:block;

Solution Two: replace text-indent with padding;

3.4IE6 below input background picture scrolling

WORKAROUND: Set a layer of div outside, the background image is written in the Div, the input background is transparent or none.

3.5IE6 label (radio, CheckBox) without the For property has no effect

<label><input type= "checkbox" Id= "Man" >man</label>

3.6IE6 below textarea scroll bar is default

Workaround: Textarea{overflow:auto;}

4. Gaps in the picture below

A, display:block; (Change the characteristics of the label itself)

B, vertical-align (perfect solution)

Minimum height problem under 5.ie6

Ie6 the minimum height below 20px will resolve to 20px

Workaround:

Height:1px;overflow:hidden;

The problem of 6.ie6body height

<div class= "wrap" >2      <ul>3          <li>fdasfd</li>4          <li>fdsfds</li>5          <li>fdfds</li>6      </ul>7 </div>

1. wrap{2     width:800px;  3     height:200px; 4     margin:200px auto; 5     border:1px solid red;  6     position:relative; 7     Overflow:hidden; 8} 9. Wrap ul{10     float:left; one     position:relative;     Ft:50%;13     top:50%;     border:1px solid red;     height:100px;}17. Wrap li{18     float:left; 19     width:100px,     height:100px, background:red,     position:relative,     left:-50%;24     top:-50%;     margin-left:10px;     list-style:none _display:inline;     /*ie6 Bilateral distance */28     * OVERFLOW:HIDDEN;/*IE7 below does not support width */29}

In the above horizontal vertical center floating element encountered a problem, that is, if you do not add height to the UL, then Li top:-50% failure, why?

Cause: Whether an object can be displayed using percentages, depending on the object's parent object

How can I support percentages:

In general, there are two conditions to meet:

First, the parent tag has a height to be found, that is, to traverse the parent tag to find a fixed height, if there is a height in the middle of auto or do not set the Height property, the altitude percentage does not work;

Second, the properties of the label itself, if the inline element, you need to have a floating, absolute positioning, fixed positioning and other properties let him support the wide height;

Above Li's upward offset is relative to the UL, and UL no height, so Li will not offset upward.

Similarly, we are going to do a mask layer {position:absolute;top:0;left:0;height:100%;width:100%;background: #000; Opacity:0.3;filter:alpha ( OPACITY:30), the mask layer needs to be set to a width of 100%, under Ie67, although the mask layer of the offsetparent (anchor parent) is HTML, but the browser by default, is not given the body a height attribute, Therefore, if we do not set the body height, the height of the mask layer will not be used, so when we set height:100% for the mask layer, it will not produce any effect, and when we set the body to 100%, the height:100% of the mask layer will take effect. So we need to give IE6 the following body{height:100%;}

7.1px dotted red, not supported under IE6, behaves as 1px dashed red

Workaround: Cut the background tile (it looks nice with dashed)

8. Resolve the margin transfer under IE6 to trigger Haslayout

When the parent has a border under IE6, the margin value of the child element disappears

WORKAROUND: Trigger the parent's haslayout:zoom:1;

9.ie6 the pseudo class only supports a label

Note The order of writing: A:link a:visited a:hover a:active

10.ie6 when the sum of the width of a row of child elements is more than 3px from the width of the parent, or if there is a state of discontent, the bottom margin of the last line of the child element is invalidated under IE6 11. Transparency OPACITY,IE8 incompatible with the following

Filter:alpha (opacity:);

12.ie6 under PNG is not supported

Workaround: JS, filter (_background:none;_filter:progid:dximagetransform.microsoft.alphaimageloader (src= "XX.png", sizingmethod= "crop");)

13.ie67 illegal nesting of tags will be handled abnormally

such as: ul>li*4+p

Under the standard browser P tag and Li for sibling relationship

IE67: P tag will be eaten by Li and become a parent-child relationship

14.ie67 There is no screen height below, there will also be scroll bars

Workaround: Overflow:auto;

15.Ie6/7: Hide and Seek bug

condition 1: A floating element followed by a non-floating element followed by a cleanup element, all elements contained in a parent element with a background color or background image.

Workaround:

1. Do not use the background or picture in the parent container (this is not possible, of course, if you have to have a background).

2. Specify a row height for the container.

3. Set the Position property of the floating element and container element to relative.

Condition 2: a floating element bursting the container, if there is no floating content after him, and there are some definitions: hover link, when the mouse moved to those links, the IE6 will trigger hide and seek.

Workaround:
1. Add a <span style= "Clear:both" after (the non-floating) content; > </span>
2. Triggering the haslayout of the container containing the links, a simple method is to define the height:1%;

A summary of IE6 compatibility issues