A brief summary of some CSS hack written for IE6

Distinguish the hack of IE6
1. Distinguish between IE6, 7 and FF/IE8:

JavaScript Code to copy content to clipboard

1. Background:blue;*background:orange;

Reference
Display effect:
IE 6/7:orange
Ff/ie8:blue
Principle: FF/IE8 does not support * start, while IE6/7 support.

2. Difference between IE6 and IE7/IE8/FF:

CSS Code copy content to clipboard

1. Background:green;_background:Blue;

Reference
Display effect:
Ie7/8/ff:green
Ie6:blue
Principle: IE6 Support Underline "_", IE7, 8 and Firefox do not support underline.

3. Distinguish between FF/IE8 and IE6/7:

CSS Code copy content to clipboard

1. background:orange;+background:green;-background:blue;

Or

CSS Code copy content to clipboard

1. background:orange;*background:green!    important;*background:blue;

Reference
Display effect:
Ie6:blue
Ie7:green
Ff/ie8:orange
Principle: IE6 can recognize that-,IE7 can identify +,IE8 and FF are not recognized + and-
IE8/FF does not recognize the!important *,IE7 priority recognition!important,ie6 is not recognized.

4. The CSS hacks of IE8, IE7, IE6 and Firefox can be distinguished at the same time:

CSS Code copy content to clipboard

1. . test{
2. color:#000; / * Firefox * /
3. color:/*\**/#00f \9; / * IE8 * /
4. *color:#f00; / * IE7 * /
5. _color:#0f0; / * IE6 * /
6. }

IE6 compatible with some of the additional considerations that need to be considered:
1.position:fixed

Impressed by this attribute, every time need to use fixed time, IE6 always pop out to tell you, I do not support position:fixed, you have to me a special point, or use a CSS expression, if you always calculate the height of scrolling, plus position:absolute.

2. Floating double margin

When using margin in the float, you have to always remember to add display:inline, or IE6 do not give you a good face, will make you layout confusion, because it will be double margin.

3. Transparent Background

Before always use PNG8 to compatible with IE6, there is no way, you also want PS on the work, diagram, you want to add a dd_belatedpng.js, all kinds of skills emerge, but there is a time-consuming not pleasing.

4.max-height/min-height

To give it a maximum size or a minimum size, IE6 tells you, I can only use the definite size, if you need to, use the expression.

5.IE6 Click link appears dashed

Oh, product said not to remove the impact of user experience, I just want to say: With the IE6 also talk about what experience.

6. Pop-up window appears on select to add an IFRAME

Because select is a control in IE6, the hierarchy is higher than the other layers, so if the pop-up window is compatible with IE6, the background remembers to add a layer of IFRAME

7. The size exceeds the automatic extension

If you add a height to a layer, when the content is exceeded, there is no Overflow:hidden, when the IE6 default will open, sometimes inexplicable layout confusion.

8. Cannot use. class.class2

Using the above CSS notation is not recognized in IE6, which leads to, many times you have to change the refactoring strategy, instead of the. Class-class1.

9. Box model resolution Inconsistent

In quirks mode, the width of the box is calculated differently from the standards mode

In the IE box model,
Box width = content width + padding left + padding right + border left + border right,
Box Height = content height + padding top + padding bottom + border top + border bottom,
In the standard box model, box size is the size of content.

A brief summary of some CSS hack written for IE6