Some common css bug handling for IE6 and ie6cssbug

Some common css bug handling for IE6 and ie6cssbug

Css bug: parsing inconsistency in different browsers, or the problem that CSS styles cannot be correctly displayed in the browser is called css bug;

CSS Hack: css hack is a kind of technique that is compatible with css correctly displayed in different browsers, because they all belong to unofficial modifications to css code, or unofficial patches.

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

Today I will share with you some common BUG handling for IE6:

(1) image gap:

A) image gap in div (this BUG occurs in IE6 and earlier versions)

Description: When an image is inserted into a div, the image will support three pixels below the div;

Hack1: Write <div> and on one line;

Hack2: Convert into a block element and add the declaration: display: block to ;

B) dt, li (IE6)

Hack: Add Declaration: display: block; overflow: hidden;

(2) default height (IE6)

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

Hack1: Add declaration to the element: font-size: 0;

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

(3) Double float (double margin)

Description: when parsing floating elements in IE6 and earlier browsers, the floating edge boundary is incorrectly doubled.

Hack: Add declaration to floating element: display: inline;

(4) Percentage BUG

Description: In IE6 and earlier versions, the resolution percentage is calculated in rounding mode, resulting in 50% plus 50% and greater than 100%;

Hack: add clear: right to the floating element on the right. (clear the floating element on the right)

(5) mouse pointer

Description: The hand attribute value of the Cursor attribute is only recognized by browsers earlier than IE8. other browsers do not recognize this declaration. The pointer attribute value of the Cursor attribute IE6 and later versions and other kernel browsers recognize this declaration.

Hack: If the mouse pointer of an element is a hand type, a statement should be added: Cursor: pointer;

(6) Inconsistent height of form rows

Description: The Row Height of the form element is inconsistent;

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

(7) The default size of Button elements is inconsistent

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

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

Hack2: a tag of the input coat. In this tag, write the button style and remove the border and background color of the input;

Hack3: If the button is an image, use the image as the button background;

(8) When the browser parses the button border, it will resolve the border inside the button without affecting the button size.

(9) When the browser parses the value of the margin attribute, the upper and lower boundary attribute values overlap and the left and right sides are added;