Css skills and compatibility issues

1css controls truncated text overflow:

. Block {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: Left ;}

Automatic line feed

dd{white-space:normal; word-break:break-all;}

Force do not wrap

dd{white-space:nowrap;}

2 solve the problem of double ie6margin

.fl{float:left;display:inline}.fr{float:right;display:inline}

3. Adaptive height

① Add a sub-Div to the parent Div

.clear{clear:both}

② Add attributes to the CSS of the parent Div

#wrapper{ overflow:hidden; zoom:1; margin:5px auto;}

4css clear floating universal float Closure

.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}*html .clearfix{height:1%;}*+html .clearfix{height:1%;}.clearfix {display:block;}

Simplified font

font:italic bold 12px/20px arial,sans-serif;

Remove the dotted border of links (including image links)

/* for IE */a,area { blr:expression(this.onFocus=this.blur()) }/* for Firefox */:focus { outline: none; } 

Align icons and text

<Span style = "vertical-align: middle;">  </span> <a style = "vertical-align: middle; "href =" "> link </>

1. Difference between CSS hack code in IE and non-ie browsers

# Divcss5 {Background: Blue;/* Non-ie background colors */Background: Red \ 9;/* IE6, IE7, and IE8 background colors */}

2. Differences between IE6, IE7, IE8, and ff css hack
[Difference]: "\ 9", "*", and 」,「*」,「_」
[Example ]:

# Divcss5 {Background: Blue;/* the Firefox background turns blue */Background: Red \ 9;/* The IE8 background turns red */* Background: black; /* change the IE7 background to black */_ Background: orange;/* change the IE6 background to orange */}

[Note]: Internet Explorer series can read "\ 9", Internet Explorer 6 and Internet Explorer 7 can read "*" (in meters), and Internet Explorer 6 can recognize "_" (bottom line ), therefore, you can write it down in order, so that the browser can correctly read and understand the CSS syntax, therefore, you can effectively distinguish ie versions from non-ie browsers (such as Firefox, opera, Google Chrome, and Safari ).

3. Differences between IE6, IE7, and Firefox (exp 1)
[Difference]: "*" and ]:「*」,「_」
[Example ]:

# Divcss5 {Background: Blue;/* the Firefox background turns blue */* Background: black;/* The IE7 background turns black */_ Background: orange; /* change the IE6 background to orange */}

[Note]: IE7 and IE6 can read "*", while IE6 can read "_" (bottom line), but IE7 cannot read 「_」, firefox (non-ie browsers) cannot identify "*" or "_" at all. Therefore, we can distinguish IE6, IE7, and Firefox through such differences.

4. Differences between IE6, IE7, and Firefox (Exp 2)
[Difference symbol ]:「*」,「! Important 」
[Example ]:

# Divcss5 {Background: Blue;/* the Firefox background turns blue */* Background: Green! Important;/* change the IE7 background to green */* Background: orange;/* change the IE6 background to orange */}

[Note]: IE7 can identify "*" and 「! Important, but IE6 can only recognize "*", but cannot recognize 「! Important. Firefox can read 「! Important ", but cannot identify" * ". Therefore, we can effectively distinguish IE6, IE7, and Firefox by using these differences.