Shulou(Shulou.com)06/02 Report--

This article mainly explains "IE6 has what common CSS parsing Bug", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's train of thought slowly in depth, together to study and learn what common IE6 CSS parsing Bug bar!

1. Default height (IE6)

Description: in IE6 and below, some block elements have a default height (around 16px;)

Hack1: add a declaration to the element: font-size:0

Hack2: add a declaration to the element: overflow:hidden

two。 The picture has a frame BUG, which appears when the picture is added to IE. Hack: add border:0; or border:none to the picture.

3. Picture gap, BUG of picture gap in div

Description: when you insert a picture in div, the picture expands the bottom of the div by about three pixels.

Hack1: write and write on one line; ie6

Hack2: to be converted to a block element, add a declaration: display:block

Hack3: add vertical-align:top/middle/bottom to the picture.

4. Double floating direction (double margin) (only IE6 appears)

Description: when Ie6 and earlier browsers parse floating elements, they mistakenly double the float to the edge boundary (margin).

Hack: add a declaration to a floating element: display:inline

5. Inconsistent line height alignment of form elements

Description: inconsistent line height alignment of form elements

Hack: add a declaration to the form element: float:left

6. Button elements vary in size by default

Description: button elements vary in size from browser to browser

Hack1: uniform size / (simulated with a tag)

Put a label on the outside of hack2:input, write the style of the button in this label, and remove the border of input.

Hack3: if the button is a picture, just use the picture as the background image of the button

7. Percentage bug

Description: when parsing percentages in IE7 and below, it is rounded, resulting in 50% plus 50% greater than 100%. (will also be affected by the system)

Hack: add a declaration to the floating element on the right: clear:right; means: clear the right float.

8. Mouse pointer bug

Description: the hand attribute value of the cursor attribute is only recognized by browsers below IE9. Other browsers do not recognize this declaration. The pointer attribute value of the cursor attribute is recognized by IE6.0 and other kernel browsers.

Hack: if the mouse pointer shape of an element is hand-shaped, a declaration should be added: cursor:pointer

9. Transparency attribute

Compatible with other browsers: opacity:value; (value range of value 0-1)

Example: opacity:0.5;)

IE browser: filter:alpha (opacity=value); value range: 0-100 (integer)

BUG of the 10.li list

1): vertical bug occurs when parent element (li) has float:left; child element (a) when float is not set

Hack: set floats for both parent element li and child element a

2): when an in li is converted to block; and has height and float, the ladder display will appear if the float is not set in li.

Hack: add float to li at the same time

11. When an and span are added to the li to float left and right respectively, and after the height of the li is set, there will be an extra gap of about 3 pixels below the li in the IE7 and below browsers.

Hack: add float:left; and width:100% to li

twelve。 If there is no float between the current element (the first child element in the parent element) and the parent element, setting margin-top will incorrectly add margin-top to the parent element.

Css hack:

1. Add an overflow:hidden; to the parent element (recommended)

two。 Float a parent or child element

3. When the parent element has a border, you can add the margin-top value directly to the child element

13.margin BUG

When two elements are arranged up and down, the upper element has margin-bottom:30px; and the lower element has margin-top:20px;, the distance between them will not be added, but will be set to a larger value.

Thank you for your reading, the above is "IE6 has what common CSS parsing Bug" content, after the study of this article, I believe you have a deeper understanding of what common IE6 CSS parsing Bug this problem, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.