Count the ie6bugs that cannot be viewed directly.

1. The BUG that li has 3 pixels at the bottom of IE

Solution: Add float: left; to <li>

2. IE6's odd-high BUG.

Solution: Change the externally positioned div width to an even number. The same is true for height.

3. IE6 text overflow BUG

There are several conditions for this BUG

1. It is caused by comments. Just delete all comments.

2. Place the hidden input directly under form.

3. The div whose display is none may also cause this bug.

4. You can package a DIV again.

Text overflow caused by comments is a BUG in IE6. The number of overflow words = the number of comments x 2-1. The words here are valid in Chinese or English numbers. The location of the comment must be related to the overflow location, the floating block, and the fixed width of the text block.

Solution:

1. Do not place comments. The simplest and quickest solution;

2. Do not place comments between two floating blocks;

3. Include text blocks between New <div> </div>, for example, <div style = "float: right; width: 400px "> <div> pull this is the extra pig </div>;

4. Remove the fixed width of the text block, which is similar to 3;

5. Add a <br/> or space to the backend. (not recommended)

6. Use the IE annotation format, such as: <! -[If! IE]> Put your commentary in here... <! [Endif]->

7. Add position: relative to the box; Attribute

4. style Chinese comments are invalid.

If the following conditions are met, the following style cannot be commented out:

1. css has Chinese comments

2. css is ANSI encoded

3. html is UTF-8 encoded

Solution:

1. Remove Chinese comments and use English comments

2. Unified css and html Encoding

The second solution is recommended.

Ps: css for uft-8 html For ANSI will not be invalid.

5. The BUG of empty lines at the bottom of li in IE.

The list Frequently Asked Questions in IE6 appear when the content in a li is a display: block anchor. In this case, spaces between list elements are not ignored, and an additional line is usually displayed between each li. One solution to avoiding unnecessary blank spaces in the vertical direction is to assign the anchor layout. Another advantage is that the entire rectangular area of the anchor can respond to mouse clicks.

Solution:

1. Add zoom: 1 to the li a style;

2. Add display: inline to the li style;

3. Write the <li> label as a line;

4. Add width: 100% or a width value to the li a style;

6. the BUG in which the child element is absolutely located after the parent level uses padding.

After the parent layer uses position: relative; and padding (except for 0 of course), the starting coordinates of the positioning in the ie6 middle layer are counted from the position after padding, the others are counted from the real position of the layer, rather than the position after being changed by the padding. This results in the use of position: absolute for layer positioning when ie6 is different from other browsers.

Solution:

Add the outer layer width or zoom: 1

7. Three-pixel BUG caused by display: none

Solution 1:

Add a margin-right:-3px to the last div.

For example, <divstyle = "display: none;"> </div> <divstyle = "background: green; width: 10px; float: left; height: 300px; margin-right: -3px "> </div>

Solution 2:

Hide the display: none div in another form.

For example: <divstyle = "position: absolute; visibility: hidden"> </div>

8. Picture 3px in IE6

In IE 6, when the DIV uses a background image (or directly inserts an image into the DIV), a blank interval will appear at the bottom of the image. After measurement, it is exactly 3px.

Solution:

The default font size of IE6 is 12pt, and the default Row Height is normal.

1. Add: font-size: 0px to the DIV;

2. Set img to "display: block ;".

3. Set the vertical-align attribute of the image to "top, text-top, bottom, text-bottom.

4. Set the floating attribute of the image, "# sub img {float: left ;}".

5. cancels the space between the Image Tag and the last ending tag of its parent object. This method is applicable to a narrow range, only when the parent object contains only one image object, there is no gap between the end tag of the parent object and the end tag of the parent object.

9. IE6 Double Floating BUG

Solution:

The solution is to add display: inline;

10. IE6's famous 3px BUG (headers bug ):

Two layers, one floating, one non-floating, put one floating in the non-floating layer, you will find a gap between the two, the width is 3px. This is the biggest headache.

Solution:

1. All layers are floating. Setting the layer on the right to the floating layer can eliminate this nasty 3px interval.

2. Apply margin-right:-3px; to the left-side layer to solve the IE 3px bug.

11. Ie6 image leading to invalid line spacing

Solution: Attributes of img, input, textarea, select, object and other elements connected to the text are margin: (line-height)/2px 0)

12. The failure of the link in the container after the PNG image is transparent using the filter in IE6.

The solution is to define a relative positioning attribute for the link. Position: relative

13. Disable the common Chinese Input Method for text boxes.

<Div> Verification Code <input type = "text" style = "ime-mode: disabled"/> </div>

IE can use ime-mode: disabled. firefox3 also supports this private attribute of IE.