css技巧和相容問題

1css控制截斷文字溢出：

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

自動換行

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

強制不換行

dd{white-space:nowrap;}

2解決IE6margin雙倍的問題

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

3自適應高度

①在父div中加入一個子div

.clear{clear:both}

②在父div的css中加入屬性

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

4CSS清除浮動 萬能float閉合

.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;}

字型簡寫

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

去掉連結（包括圖片連結）的虛線邊框

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

表徵圖和文字對齊

<span style="vertical-align:middle;" ><img src="b-grade.png" ></span><a style="vertical-align:middle;"  href="">網站連結接網站連結接</>

1.區別IE和非IE瀏覽器CSS HACK代碼

#divcss5{background:blue; /*非IE 背景藍色*/background:red \9; /*IE6、IE7、IE8背景紅色*/} 

2.區別IE6,IE7,IE8,FF CSS HACK 
【區別符號】：「\9」、「*」、「_」
【樣本】：

#divcss5{background:blue; /*Firefox 背景變藍色*/background:red \9; /*IE8 背景變紅色*/*background:black; /*IE7 背景變黑色*/_background:orange; /*IE6 背景變橘色*/}

【說明】：因為IE系列瀏覽器可讀「\9」，而IE6和IE7可讀「*」(米字型大小)，另外IE6可辨識「_」(底線)，因此可以依照順序寫下來，就會讓瀏覽器正確的讀取到自己看得懂得CSS文法，所以就可以有效區分IE各版本和非IE瀏覽器(像是Firefox、Opera、Google Chrome、Safari等)。

3.區別IE6、IE7、Firefox (EXP 1)
【區別符號】：「*」、「_」
【樣本】：

#divcss5{background:blue; /*Firefox背景變藍色*/*background:black; /*IE7 背景變黑色*/_background:orange; /*IE6 背景變橘色*/} 

【說明】：IE7和IE6可讀「*」(米字型大小)，IE6又可以讀「_」(底線)，但是IE7卻無法讀取「_」，至於Firefox(非IE瀏覽器)則完全無法辨識「*」和「_」，因此就可以透過這樣的差異性來區分IE6、IE7、Firefox

4.區別IE6、IE7、Firefox (EXP 2)
【區別符號】：「*」、「!important」
【樣本】：

#divcss5{background:blue; /*Firefox 背景變藍色*/*background:green !important; /*IE7 背景變綠色*/*background:orange; /*IE6 背景變橘色*/} 

【說明】：IE7可以辨識「*」和「!important」，但是IE6隻可以辨識「*」，卻無法辨識「!important」，至於Firefox可以讀取「!important」但不能辨識「*」因此可以透過這樣的差異來有效區隔IE6、IE7、Firefox。