CSS "*", ">", and "_" symbols IE6, IE7, and IE8 are compatible with Firefox CSS.

New IE8, more asshole. Now let ie explain it with IE7 script.

Add <meta http-equiv = "X-UA-compatible" C/> to the head.

1.> it is a sub-Selector Used to match the direct generation, and the grandchildren do not match. IE6 is not supported. Example:
Li: hover> A sub-object selector only works for the son and does not work for the son.
Li: The selector for future generations of hover A. It works for son, grandson, and descendant.

2. IE6 supports underlines, while IE7 and Firefox do not.

3. * is specified as IE6 or earlier. Non-ieBrowserDo not know the wildcard selector.
HTML elements are generally consideredWebpageThe first element on is the root element, but in fact, all versions under IE7 have an anonymous root element, which is surrounded by HTML elements. In this case, you can use a general selector to point a specific style to an HTML element that contains an anonymous root element. For example

IE6 and older ie5.5

1. *Html{
2. Font-size: small;
3. }

CopyCode Run code

(Not recognized by browsers other than IE)

IE 7 does not completely remove this hack. Instead, we use this method for filtering, that is, using * +

1. * + HTML {
2. Font-size: Small
3. }

Copy codeRun code

This expression means that except IE7 can recognize this font-size: small, other browsers will not see this one. It can be said that this is the exclusive hack of IE7.

Conclusion: In any conventionalCSSAdd a common selector and an HTML type selector at the beginning of the rule. This will hide this rule for all browsers except IE.

IE6 recognition * and _, not recognized! Important
IE7 recognition *, not recognizing _, recognition! Important
Firefox does not recognize and recognize both! Important

4. CSS compatibility between IE and Firefox

1. doctype affects CSS Processing

When the layer cannot use the margin: 0 auto center problemSolution!

If you cannot use <Div style = "margin: 0 auto"> .... </div> to set layer center. this problem may occur because the DTD of hmlt is not defined. It takes time for HTML to evolve to standardized XML. Therefore, there are three DTD versions, what we use most now is the transitional DTD.

The three are

1. Transition type

1. <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Copy codeRun code

2. Strict type

1. <! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Copy codeRun code

3. Frame Type

1. <! Doctype HTML public "-// W3C // dtd xhtml 1.0 frameset // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Copy codeRun code

If you are not familiar with the CSS 2.0 standard, do not use a strict DTD. Now you can use a transitional version!

Add

1. <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Copy codeRun code

2. FF: When Div sets margin-left and margin-Right to auto, it is already centered, and IE does not work.

3. FF: when setting text-align for the body, set margin: auto (mainly margin-left, margin-Right) for the DIV to be centered.

4. FF: After padding is set, the DIV will increase the height and width, but IE will not, so you need to use it! Set one more height and width for important.

5. FF: supported! Important, ie is ignored, available! Important sets a special style for ff. It is worth noting that you must set XXXX! The important sentence is placed on the other sentence.

6. Vertical center problem of Div: vertical-align: middle; Increase the line spacing to and the wholeDivThe line-height is the same as the line-Height: 200px, and the text is inserted to center vertically. The disadvantage is that you need to control the content rather than line feed.

7. cursor: pointer can display the cursor finger in IE ff at the same time. Hand can only be IE

8. FF:LinkAdd a border and a background color. Set display: block and float: left to avoid line breaks. Configure the parameters for a and menubar by referring to menubar.HeightTo avoid misplacement of the bottom side, if no height is set, you can insert a space in menubar.

9. The box model interpretation in Mozilla Firefox and IE is inconsistent, resulting in a 2px difference. solution:

1. Div {margin: 30px! Important; margin: 28px ;}

Copy codeRun code

Note that the order of the two margin entries must not be reversed. According to Alibaba Cloud! The important attribute ie cannot be identified, but other browsers can. So in IE, it is actually explained as follows: div {maring: 30px; margin: 28px}

If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: xxpx! Important;

11. UL labels have padding values by default in Mozilla, while in IE, only margin has a value. Therefore, UL {margin: 0; padding: 0;} is defined first ;}

Most problems can be solved.

Note:

1. The DIV of float must be closed.

For example: (floata and floatb attributes have been set to float: Left;) <# Div id = \ "floata \">

1. <# Div id = \ "floatb \">
2. <# Div id = \ "notfloatc \">

Copy codeRun code

The notfloatc here does not want to continue translation, but wants to move down.

This code has no problem in IE, and the problem lies in ff. The reason is that notfloatc is not a float label and must be closed.

In
<# Div class = \ "floatb \">
<# Div class = \ "notfloatc \">

<# Div class = \ "Clear \">

This Div must pay attention to the declaration position. It must be placed in the most appropriate place and must be at the same level as two DIV with the float attribute. No nested relationship exists between them; otherwise, an exception may occur.

And define the clear style as follows:

1. . Clear {
2. Clear: Both ;}

Copy codeRun code

In addition, in order to automatically adapt to the height, overflow: hidden should be added to the wrapper;

When a box containing float is automatically adapted to the IE environment, the private attribute layout of IE should be triggered (the Internet Explorer !) Zoom: 1; can be used to achieve compatibility.

For example, a wrapper is defined as follows:

1. . Colwrapper {
2. Overflow: hidden;
3. Zoom: 1;
4. Margin: 5px auto;

Copy codeRun code

}

2. The problem of doubling margin.

The left and right distance of the margin set for the DIV set to float in IE is doubled. This is a bug in IE6.

The solution is to add the display: inline In the div;

For example:

<# Div id = \ "imfloat \">

The corresponding CSS is

1. # Iamfloat {
2. Float: left;
3. Margin: 5px;/* 10 Px in IE */
4. Display: inline;/* in IE, It is understood as 5px */}

Copy codeRun code

5. the most cruel means -! Important;

If there is no way to solve some detailed problems, you can use this method. FF "! Important will automatically give priority to resolution, but IE will ignore it.

1. . Tabd1 {
2. Background: URL (/RES/images/up/tab1.gif) No-repeat 0px 0px! Important;/* style for FF */
3. Background: URL (/RES/images/up/tab1.gif) No-repeat 1px 0px;/* style for IE */}

Copy codeRun code

It is worth noting that XXXX must be added! Important is placed on the other sentence, which has been mentioned above

Difference between different browsers, CSS hack writing:

Difference between IE6 and FF:

Background: orange; * Background: blue;

Difference between IE6 and IE7:

Background: Green! Important; Background: blue;

Difference between IE7 and FF:

Background: orange; * Background: green;

Difference ff, IE7, IE6:

Background: orange; * Background: Green! Important; * Background: blue;

Note: Both IE and standard browsers (such as ff) cannot recognize *;

IE6 can recognize *, but cannot recognize it! Important,

IE7 can recognize * and can also recognize! Important;

FF cannot recognize *, but can recognize it! Important;

*! Important
IE6 √ ×
IE7 √
FF × √

Add another underscore "_",

IE6 supports underlines, while IE7 and Firefox do not.

So you can also distinguish IE6, IE7, and Firefox.

: Background: orange; * Background: green; _ Background: blue;

Note: No matter what method, the order of writing is Firefox's preface, IE7's writing in the middle, and IE6's writing at the end.

For example, to distinguish IE6 from Firefox, you can write as follows:

1. <Style>
2. Div {
3. Background: green;/* For Firefox */
4. * Background: red;/* For IE6 */
5. }
6. </Style>
7. <Div> I saw red in IE6 and green in Firefox. </Div>
8. <Style> Div {Background: green;/* For Firefox */* Background: red;/* For IE6 */} </style> <div>
9. I saw red in IE6 and green in Firefox. </Div>

Copy codeRun code

Explanations:

In Firefox, the above CSS does not recognize the stuff with an asterisk *, so it is filtered out and ignored. The parsed result is: div {Background: Green}, so the background of this div is green.

In IE6, both background can be identified. The parsed result is: div {Background: green; Background: red;}, so according to the priority level, the red at the end has a high priority, so of course the background color of this div is red.

CSS is compatible with IE6, IE7, and Firefox.

The first is the CSS hack method.

1. Height: 20px;/* For Firefox */
2. * Height: 25px;/* For IE7 & IE6 */
3. _ Height: 20px;/* For IE6 */

Copy codeRun code

Pay attention to the sequence.

This also belongs to CSS hack, but it is not as concise as above.

1. # Example {color: #333;}/* Moz */
2. * Html # example {color: #666;}/* IE6 */
3. * + Html # example {color: #999;}/* IE7 */

Copy codeRun code

The second method is to use conditional annotations dedicated to IE.

<! -- Other browsers -->

1. <LINK rel = "stylesheet" type = "text/CSS" href = "css.css"/>
2. <! -- [If IE 7]>
3. <! -- Suitable for IE7 -->
4. <LINK rel = "stylesheet" type = "text/CSS" href = "ie7.css"/>
5. <! [Endif] -->
6. <! -- [If lte ie 6]>
7. <! -- Suitable for IE6 and later -->
8. <LINK rel = "stylesheet" type = "text/CSS" href = "ie.css"/>
9. <! [Endif] -->

Copy codeRun code

The third method of CSS Filter is as follows:ClassicTranslated from a foreign website ..

Create a CSS style as follows:

1. # Item {
2. Width: 200px;
3. Height: 200px;
4. Background: red;
5. }

Copy codeRun code

Create a new Div and use the CSS style defined above:

<Div id = "item"> some text here </div>

Add the lang attribute in the body representation. The Chinese character is Zh:

<Body lang = "en">

Now define another style for the DIV element:

1. *: Lang (en) # item {
2. Background: Green! Important;
3. }

Copy codeRun code

This is intended for use! Important overwrites the original CSS style. Because the Lang selector ie7.0 does not support this sentence, it does not have any effect on this sentence, so it achieves the same effect under ie6.0.EffectUnfortunately, Safari does not support this attribute, so you need to add the following CSS style:

1. # Item: Empty {
2. Background: Green! Important
3. }

Copy codeRun code

: The empty selector is a css3 specification. Although safari does not support this specification, this element is still selected, whether or not this element exists, now green will be available in browsers other than IE versions.

For compatibility with IE6 and FF, consider the previous! Important prefers the first method, which is concise and compatible.

The list label ul Li, which is the most complained by friends, says that IE and FF are always different each time this label is encountered. in this case, why not define the label attribute in the style sheet, such as UL {padding: 0; margin: 0;}. For UL labels, ie will automatically indent several pixels, FF is not like this, so this is the root cause. of course, the above definition is definitely not very beautiful. You can adjust it manually at this time, for example, to {padding: 0; margin: 0 0 0 10px; List-style-position: inside;}, so for this label in the future, as long as you find that IE and FF are inconsistent, you can check the corresponding CSS attributes and describe them exaggerated, use IE and Firefox to view the results. If they are consistent, the results are valid. form tag, which is in IE, will automatically margin some margins, while margin in FF is 0. Therefore, if you want to display consistent, so it is best to specify margin and padding in CSS. For the above two problems, I usually use this style ul first in CSS, FORM {margin: 0; padding: 0 ;} definition dead

The following question is not the default value.

1 ,! Important

With IE7! Important Support ,! The important method is only for the hack of IE6. (note the writing method. Remember to advance the declaration position .)

1. <Style>
2. # Wrapper
3. {
4. Width: 100px! Important;/* IE7 + FF */
5. Width: 80px;/* IE6 */
6. }
7. </Style>

Copy codeRun code

2, IE6/ie77 for Firefox

1. * + HTML and * HTML are unique tags of IE, which are not supported by Firefox at the moment. * + HTML is also a unique tag of IE7.
2. <Style>
3. # Wrapper
4. {
5. # Wrapper {width: 120px;}/* Firefox */
6. * Html # wrapper {width: 80px;}/* IE6 fixed */
7. * + Html # wrapper {width: 60px;}/* IE7 fixed, pay attention to the Order */
8. }
9. </Style>

Copy codeRun code

Note:

* + The HTML hack for IE7 must ensure that the following statements are made on the top of the HTML:

1. <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">

Copy codeRun code

1. CSS style for Firefox IE6 IE7

Most of them are used now! Important comes to hack. It can be displayed normally for IE6 and Firefox tests,

But IE7! Important can be correctly explained, which will causePageNot displayed as required! Find a needle

The good hack Method for IE7 is to use "* + html". Now you can use IE7 to browse it. It should be okay.

You can write a CSS file as follows:

1. #1 {color: #333;}/* Moz */
2. * Html #1 {color: #666;}/* IE6 */
3. * + Html #1 {color: #999;}/* IE7 */

Copy codeRun code

In FirefoxFontThe color is displayed as #333, the font color in IE6 is displayed as #666, And the font color in IE7 is displayed as #999.

2. center problem in CSS layout

The main style definition is as follows:

1. Body {text-align: center ;}
2. # Center {margin-Right: auto; margin-left: auto ;}

Copy codeRun code

Note:

First, define text-align: center in the parent element. This means that the content in the parent element is centered. for IE, this setting is enough.

However, it cannot be centered in Mozilla. The solution is to add "margin-Right: auto; margin-left: auto;" when the sub-element is defined ;"

It should be noted that, if you want to use this method to center the entire page, it is recommended that you do not set it in one Div. You can split multiple divs in sequence,

You only need to define margin-Right: auto; margin-left: auto; in each split Div.

4. Double distance produced by floating IE (the left and right distance of margin)

# Box {float: Left; width: 100px; margin: 0 0 0 100px; // in this case, ie will generate a PX distance display: inline; // ignore floating}

Here, let's take a closer look at the block and inline elements. The characteristics of the block elements are that they can always start on a new line, and the height, width, row height, and margins can be controlled (block elements ); the features of the inline element are as follows: On the same line as other elements ,... uncontrollable (embedded element );

5 questions about IE and width and height

IE does not recognize the Min-definition, but in fact it treats normal width and height as Min conditions. In this case, the problem is big. If only the width and height are used, the values in the normal browser will not change. If only Min-width and Min-height are used, the width and height under IE are not set at all.

For example, to set a background image, the width is important. To solve this problem, you can:

1. # Box {width: 80px; Height: 35px;} HTML> body # box {width: auto; Height: auto; Min-width: 80px; Min-Height: 35px ;}

Copy codeRun code

6. Minimum page width

Min-width is a very convenient CSS command, which can specify that the element is at least or less than a certain width, so as to ensure correct layout. But IE does not recognize this,

In fact, it uses width as the minimum width. To enable this command to be used on IE, you can place <div> under the <body> label and specify a class for div:

Then CSSDesign

:

1. # Container {Min-width: 600px; width: expression (document. Body. clientwidth <600? "600px": "Auto ");}

Copy codeRun code

The first Min-width is normal, but the width of the 2nd rows is used.JavascriptThis is only recognized by IE, which will make your HTML document not formal. It actually achieves the minimum width through javascript judgment.

8 DIV floating ie text produces 3 pixel bug

The left object floats, and the left margin of the outer patch is used to locate the patch on the right. The text in the right object is 3 px away from the left.

1. # Box {float: Left; width: 800px; }# left {float: Left; width: 50% ;}# right {width: 50% ;} * html # Left {margin-Right:-3px; // This sentence is critical}

Copy codeRun code

HTML code <Div id = "box"> <Div id = "Left"> </div> <Div id = "right"> </div>

So you can also distinguish IE6, IE7, and Firefox.

1. Background: orange;/* For Firefox */
2. * Background: green;/* For IE7 & IE6 */
3. _ Background: Blue;/* For IE6 */

Copy codeRun code

Note: No matter what method, the order of writing is Firefox's preface, IE7's writing in the middle, and IE6's writing at the end.