Some common CSS BUG solutions for IE6

About some common CSS BUG processing in IE6

CSS BUG: The problem of inconsistent parsing of styles in various browsers, or the problem that CSS styles cannot be displayed correctly in browsers is called CSS BUG;

CSS Hack: css Hack refers to a technique to make CSS compatible with the correct display in different browsers, because they are all unofficial personal modifications to CSS code, or unofficial patches.

Some side effects of using Hack: reducing the readability of css code and increasing the burden of the code

Today I would like to share with you some common BUG solutions for IE6:

(1) Image gap:

　 a) div There is a gap between pictures in the div (this BUG appears in IE6 and lower versions)

　　　　 Description: When inserting an image in a div, the image will expand the bottom of the div by three pixels;

　　 Hack1: Write

and on one line;

　 Hack2: Convert to a block element and add a statement to : display: block;

b) dt, picture gap in li (IE6)

Hack: Add a statement: display: block; overflow: hidden;

(2)Default height (IE6)

Description: In IE6 and below, some block elements have a default height (lower than 18px-22px height)

Hack1: Add a statement to the element: font-size:0;

　 Hack2: Add a declaration to the element: overflow: hidden;

(3) Double float (double margin)

　 Description: When IE6 and lower browsers parse floated elements, they will incorrectly Double the display towards the edge boundary.

　Hack: Add a statement to the floating element: display: inline;

(4) Percentage BUG

　Description: When parsing the percentage in IE6 and below, it will be calculated by rounding, resulting in 50% plus 50% being greater than 100 % of cases;

Hack: Add the statement clear:right to the floating element on the right; (clear the right float)

(5) Mouse pointer

Description: The hand attribute value of the Cursor attribute is only recognized by browsers below IE8, other browsers The declaration is not recognized by the server. The pointer attribute value of the Cursor attribute is recognized by IE6 and above and other kernel browsers.

　Hack: If you unify the mouse pointer of an element to a hand shape, you should add a statement: Cursor: pointer;

(6) Inconsistent row heights of form elements

　Description: Inconsistent row heights of form elements;

Hack: Add declarations to form elements : float: left;

(7) The default size of button elements is inconsistent

　Description: The size of button elements is inconsistent in various browsers.

　 Hack1: Uniform size / (simulated with a mark);

Hack2: Put a label around the input, write the style of the button in this label, and remove the border and background color of the input;

Hack3: If the button is a picture, Directly use the image as the button background;

(8) When the browser parses the button border, it will parse the border inside the button and will not affect the button size.

(9) When the browser parses the margin attribute value, the attribute values ​​​​of the upper and lower boundaries coincide, and the left and right are added together;