css hack

	IE6	IE7	IE8	IE9	Firefox	範例
*html	V					*html .compability { color: red; }
html*	V	V				html* .compability { color: red; }
*+html		V				*+html .compability { color: red; }
!important		V	V	V	V	.compability { color: red !important; color: green; }
*	V	V				.compability { *color: red; }
_	V					.compability { _color: red; }
\9	V	V	V	V		.compability { color: red \9; }
+	V	V				.compability { +color: red; }
>		V	V	V	V	.compability > p

由於 CSS 後面的屬性會覆蓋前面的屬性

因此應該 FF 應該寫在第一個

中間是 IE7 和 IE8

最後一個才是 IE6

IE的if條件Hack

IE的if條件Hack
IE的if條件Hack可以讓IE區別於其它流覽器和IE個版本之間的流覽器，它利用<!--[if IE]>...<![endif]-->這樣的語法讓IE流覽器對齊進行解析，屬於IE專有。

<!--[if IE]> Only IE <![endif]-->

所有的IE可識別

<!--[if IE 5.0]> Only IE 5.0 <![endif]-->

只有IE5.0可以識別

<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->

IE5.0包換IE5.5都可以識別

<!--[if lt IE 6]> Only IE 6- <![endif]-->

僅IE6可識別

<!--[if gte IE 6]> Only IE 6/+ <![endif]-->

IE6以及IE6以下的IE5.x都可識別

<!--[if lte IE 7]> Only IE 7/- <![endif]-->

僅IE7可識別

<!--[if IE]>...<![endif]-->之間內容的具體用法：

<!--[if IE 7]> <link rel="stylesheet" href="../css/ie7.css" type="text/css" media="screen" /><![endif]-->

可以像這樣連結一個CSS檔

<!--[if IE]>

<style>

.clearfix {display: inline-block;}

</style>

<![endif]-->

也可以像這樣直接輸入一行CSS代碼

比較不常見的CSS屬性

設定繁體字型的英文名稱：

微軟正黑體 : Microsoft JhengHei
新細明體 : PMingLiU
細明體 : MingLiU
標楷體 : DFKai-sb
中黑體吧?:MS PGothic,

PS.ie與ff可以設定中文字型的名字、而chrome只能吃英文的名字


CSS強制不斷行：
white-space: nowrap;
word-break:keep-all;
word-wrap:normal;

CSS強制斷行：
word-wrap:break-word;
word-break:break-all;

Chrome專用屬性：
-webkit-text-size-adjust:none;
因為chrome不支援10px以下的字級，所以要用10px以下要加入這個屬性

用CSS判斷圖片的最大寬度後以適應區塊大小

當我需要設定一個圖片最小為120X120時
載入的圖片超過我設定的大小就判斷等比例縮放大小
以下為CSS設定

img {
      max-width:120px;//設定載入的圖片寬度最大為120
      height:inherit;//自適應高度(可以超過120，因為等比縮放，所以有可能寬縮放到120後高度高於120)
      width:expression(document.body.clientWidth>120?”120px”:”auto”);//圖片的判斷式，設定超過120就縮放
      overflow:hidden;//超過隱藏
}

以上適用ie7,ie9, ff, google chrome
唯獨ie8會有點小問題