Some common CSS bug handling for IE6

Some common CSS bug handling for IE6

CSS BUG: Styles in each browser to resolve inconsistencies, or CSS style in the browser does not display the correct problem is called a CSS bug;

CSS Hack:css Hack refers to a technique that is compatible with CSS to display correctly in different browsers, because they all belong to an unofficial modification of the CSS code, or an unofficial patch.

Some side effects of using hack: reduced readability of the CSS code and increased burden on the code

Share with you today some common bug-handling about IE6:

(1) Picture gap:

A) the picture gap in the div (this bug appears in IE6 and below)

Description: When inserting a picture in a Div, the picture will hold the div below the pixel;

Hack1: To write on a line;

Hack2: will be converted to block elements, to add a declaration: Display:block;

b) Picture gap in Dt,li (IE6)

Hack: Add declaration: Display:block;overflow:hidden;

(2) Default height (IE6)

Description: Some block elements have a default height (below 18px-22px height) in IE6 and the following versions

HACK1: Adding a declaration to an element: font-size:0;

Hack2: Adding a declaration to an element: Overflow:hidden;

(3) Double float (double margin)

Description: When IE6 and earlier browsers parse a floating element, the floating edge boundary is incorrectly doubled to display.

Hack: Adding a declaration to a floating element: Display:inline;

(4) Percent bug

Description: In IE6 and the following version in the resolution percentage, the rounding method is calculated, resulting in 50% plus 50% greater than 100%;

Hack: Add a declaration clear:right to the floating element on the right; (clear floating)

(5) mouse pointer

Description: The Hand property value of the cursor property is recognized only by the following browsers IE8 the other browsers do not recognize the claim. The pointer property value of the cursor property IE6 and above and other kernel browsers recognize the declaration.

Hack: If the uniform element mouse pointer is the hand type, should add the declaration: Cursor:pointer;

(6) Table single Row High inconsistency

Description: The row height of the form element is inconsistent;

Hack: Adding a declaration to a FORM element: Float:left;

(7) button element default size inconsistent

Description: The size of button elements in each browser is inconsistent.

HACK1: Uniform size/(simulation with a mark);

Hack2:input coat A label, in this tab write the style of the button, the input border and the background color removed;

HACK3: If the button is a picture, direct the picture as a button background;

(8) When the browser parses the button border, the border is parsed inside the button without affecting the size of the button.

(9) When the browser parses the margin attribute value, the attribute value of the upper and lower boundary is coincident, and left and right added;

