CSS writing sequence suggestions and CSS hack (FF & ie compatibility)

// Display attributes
Display
Position
Float
Clear
Cursor
...

// Attributes
Margin
Padding
Width
Height

/* Typographical */
Vertical-align
White-space
Text-Decoration
Text-align
...

/* Text */
Color
Font
Content

/* Border background
The reason why boder and background are put at the end is that the modification frequency is more frequent than before, and it is convenient to view them at the end. */
Border
Background
}

 

 

ProgramCode:

. Class {
Background-color: # FFFF00;/* all browsers */
* Background-color: #00ff00;/* ie */
_ Background-color: #00 FFFF;/* IE6 */
}

@ Media all and (min-width: 0 ){
. Class {
Background-color: # ff00ff;/* opera */
}/* Only opera recognition */

@ Media all and (min-width: 0 ){
. Class {
Background-color: # ff00ff;/* opera and Sa */
HTML *. Class {
Background-color: #808080;/* Sa */
}
}}

Note: safari and opera refer to the latest version.

2. Only hack recognized by Firefox 3 and IE7

Selector, X:-moz-any-link, X: Default {
/* Firefox 3 and IE7 rules here */
}

 

 

 

 

It can easily solve the compatibility problem between IE and FF (keep ff, IE7, and IE order), but this method seems to have a certain impact on loading!

Update2007-12-31 nnd is almost collapsed by the tossing of Opera:

. E {/* FF op */
Background-color: # ff0000
}
HTML *. E {/* Sa IE7 op */
Background-color: # ff00ff
}
* + Html. E {
Background-color: #000000;/* op */
* Background-color: # 0000ff;/* IE7 */
}
* Html. E {/* IE6 */
Background-color: #00 FFFF
}

For IE8 beta1, try the following hack:

/*/Selector {... }/**/
This rule is only recognized by IE8 beta1, but not by other A-grade browsers.

>>> ------ I WANT TO pagination! -- So longArticleHow nice a page is here! Haha ------- <
Description:
IE supports custom cursor file cursor: URL ()
IE supports customizing the Color Style of the scroll bar
The SELECT statement in IE6 always has the top bug, and CSS does not work for the SELECT statement.

In form, ie supports labels, including text and images. However, Firefox does not support image labels,
Clicking an image cannot make the radio or checkbox of the label for effect.

Both IE and Firefox support onscroll events, but textarea does not support this event in Firefox.

In CSS, ie supports embedding expresion in CSS, whereas Firefox does not.
Firefox selects the adjacent sub-selection character ">", which is not supported by IE6 (supported by IE7)

Firefox does not support inline-block of display, whereas IE does.

>>> ------ I WANT TO pagination! -- How nice a page is for such a long article! Haha ------- <

Favorite from: puterjam's blog
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;

IE6 IE7 FF
* √ *
! Important × √

--------------------------------------------------------------------------------
Add another underscore "_",
IE6 supports underlines, while IE7 and Firefox do not. (Recommended)

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.

>>> ------ I WANT TO pagination! -- How nice a page is for such a long article! Haha ------- <
This is a list of CSS hack extracted from other countries. It shows the support of various browsers for CSS hack and is very helpful for making compatible webpages.

>>> ------ I WANT TO pagination! -- How nice a page is for such a long article! Haha ------- <

I found some related CSS hack and summarized several methods.

IE7 hack
IE7 has fixed many bugs and added support for some separators, therefore, hack for IE hiding or display, such as * HTML {} and HTML> body {}, will expire in IE7. Although CSS hack is not recommended, it is a foolproof filter, but it can only appear in HTML, and CSS hack is useful. Nanobot found some CSS hack for IE7, specifically:

> Body
HTML *
* + Html

The first two are invalid CSS statements, which are ignored in standard compatible browsers, but not in IE7. For> body, it will replace the missing selector with the global selector *, that is, it will be processed as *> body, and not only for> selector, + ,~ This phenomenon also exists in the selector. For HTML *, because there is no space between HTML and *, it is also a CSS syntax error, but IE7 does not ignore it, but mistakenly considers there is a space here. For the third type of * + HTML, IE7 considers that the DTD declaration before HTML is also an element, so HTML will be selected. Among the three methods, only this method is legal CSS writing, that is to say, it can be verified by the validator, so it is also the hack usage recommended by the author.

Summary of other referenced friends:

Shield ie browsers (that is, they are not displayed under IE)
*: Lang (zh) Select {Font: 12px! Important ;}
Select: Empty {Font: 12px! Important ;}
Here, select is the selector, which can be changed as needed. The second sentence is unique to the Safari browser on Mac.

Only IE7 Recognition
* + HTML {...}
This hack can be used only for IE7.

Identification of IE6 and IE6 or lower
* HTML {...}
Note that many landlords have written the hack of IE6. In fact, ie5.x can also identify this hack. Not recognized by other browsers.
Html/**/> body select {......}
This sentence serves the same purpose as the previous one.
Usage:
* Html # box {...}

Only IE6 is not recognized
# Box {display/* IE6 unrecognized */: none ;}
Here we mainly use CSS annotations to separate an attribute and a value, and the stream is prior to the colon.

Only IE6 and ie5 are not recognized
# Box/**/{display/* IE6, ie5 not recognized */: none ;}
The difference here is that a CSS comment is added between the separator and curly braces.

Only ie5 is not recognized
Select/* ie5 not recognized */{display: none ;}
This sentence removes the comment of the attribute area from the previous sentence. Only ie5 is not recognized
Box Model Solution
Selct {width: ie5.x width; voice-family: "\" }\ "; voice-family: Inherit; width: correct width ;}
The box model clearing method is not passed! Important. This should be clear.

Clear floating
Select: After {content: "."; display: block; Height: 0; clear: Both; visibility: hidden ;}
In Firefox, when the child level is floating, the height of the parent level cannot fully cover the entire child level, in this case, the floating hack can be used to define the parent level.

Node ellipsis
Select {-o-text-overflow: ellipsis; white-space: nowrap; overflow: hidden ;}
This is a good technique to cut out more text and end it with a ellipsis. But Firefox does not currently support it.

Only opera Recognition
@ Media all and (min-width: 0px) {select {......} }
Set the Opera Browser separately.

Ie5.x filter, only visible to ie5.x
@ Media tty {
I {content: "\" ;}@import 'ie5win.css ';

Ie5/MAC filters are generally not required
>>> ------ I WANT TO pagination! -- How nice a page is for such a long article! Haha ------- <

Notes on CSS compatibility between IE and Firefox

CSS has a high value for the compatibility of browsers. In general, there is a great difference between IE and Firefox. Here we will introduce the compatibility points.

FAQs:

1. doctype affects CSS Processing

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

6. Vertical center problem of Div: vertical-align: middle; Increase the line spacing to the same height as the entire Div line-Height: 200px; then insert the text to the vertical center. 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: adds a border and a background color to the link. You must set display: block and float: left to avoid line breaks. Refer to menubar to set the height of a and menubar to 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:
Div {margin: 30px! Important; margin: 28px ;}
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;

10. The box interpretations of ie5 and IE6 are inconsistent.
Under ie5

 

 

Code Div {width: 300px; margin: 0 10px 0 10px ;}

The DIV width is interpreted as 300px-10px (right fill)-10px (left fill). The final Div width is 280px, in IE6 and other browsers, the width is calculated based on 300px + 10px (right fill) + 10px (left fill) = 320px. In this case, we can make the following changes:
Div {width: 300px! Important; width/**/: 340px; margin: 0 10px 0 10px}
I don't quite understand what/**/is. I only know that both ie5 and Firefox support it, but IE6 does not. If anyone understands it, please let me know. Thank you! :)

11. UL labels have padding values by default in Mozilla, while in IE, only margin has a value, so we first define

Program code ul {margin: 0; padding: 0 ;}

Most problems can be solved.

Note:

1. The DIV of float must be closed.

Example: (floata and floatb attributes have been set to float: Left ;)

Program code <# Div id = "floata"> </# div>
<# Div id = "floatb"> </# div>
<# Div id = "notfloatc"> </# div>

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

Program code <# Div class = "floatb"> </# div>
<# Div class = "notfloatc"> </# div>

Add

Program code <# Div class = "clear"> </# div>

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:

Program code. Clear {
Clear: Both ;}

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:

Program code. colwrapper {
Overflow: hidden;
Zoom: 1;
Margin: 5px auto ;}

2. The problem of doubling margin.

The DIV set to float doubles the margin set in IE. This is a bug in IE6.
The solution is to add the display: inline In the div;
For example:

<# Div id = "imfloat"> </# div>

The corresponding CSS is

Program code # iamfloat {
Float: left;
Margin: 5px;/* 10 Px in IE */
Display: inline;/* in IE, It is understood as 5px */}

3. Container inclusion relationships

In many cases, especially when the container has a parallel layout, such as two or three float Divs, the width is prone to problems. In ie, the width of the outer layer is broken by the DIV with a wider inner layer. You must use Photoshop or firework to obtain pixel-level precision.

4. Questions about height

If the content is added dynamically, it is best not to define the height. The browser can automatically scale. However, it is best to set the height of static content. (It seems that sometimes it will not be automatically pushed down and I don't know what's going on)