CSS IE6/7/8, Firefox, Safari, Chrome, Opera Hack使用簡要歸納

文章目錄

• CSS Hack1：把IE6/7/8與其它瀏覽器區別開來
• CSS Hack2：針對IE6和IE7
• CSS Hack3：單獨針對IE6
• CSS Hack4：單獨針對IE7
• CSS Hack5：單獨針對IE8
• CSS Hack6：單獨針對Firefox
• CSS Hack7：單獨針對Opera
• CSS Hack8：針對Safari和Google Chrome

網上有很多關於IE6/7/8, Firefox, Safari, Chrome, Opera CSS Hack的文章，但我覺得太過繁雜，要不給出一張看也看不懂的CSS Hack歸納表，要不就是給出一大堆代碼說明問題，不便於學習與使用。我根據自己的使用方式來簡單地歸納了一下IE6/7/8, Firefox, Safari, Chrome, Opera的CSS Hack使用方法，希望會對大家有用。

CSS Hack1：把IE6/7/8與其它瀏覽器區別開來

在css代碼屬性值後面加上“\9”（不包括雙引號），如：

123	#div {margin-top: 15px\9;}

*這樣“margin-top: 15px”屬性只有IE6/7/8瀏覽器能讀出來。

CSS Hack2：針對IE6和IE7

在css代碼的屬性名稱前加“*”（不包括雙引號），如：

123	#div {*margin-left: 15px;}

*這樣“margin-left: 15px”屬性只有IE6/7瀏覽器能讀出來。

CSS Hack3：單獨針對IE6

在css代碼的屬性名稱前加“_”（不包括雙引號），如：

123	#div {_width: 15px;}

*這樣“width: 15px”屬性只有IE6瀏覽器能讀出來。

CSS Hack4：單獨針對IE7

在css代碼的屬性值後面加“ !important”（不包括雙引號），如：

123	#div {height: 18px !important;}

*這樣“height: 18px”屬性只有IE7瀏覽器能讀出來。

CSS Hack5：單獨針對IE8

在css代碼的屬性值後面加“\0”（是斜杠加零，不包括雙引號），如：

123	#div {background: green\0;}

*這樣“background: green”屬性只有IE8瀏覽器能讀出來。

CSS Hack6：單獨針對Firefox

把針對Firefox的CSS代碼寫在下面CSS函數的大括弧之間
@-moz-document url-prefix(){ /*CSS代碼*/  }，如：

123	@-moz-document url-prefix(){#main {background: red; }}

*這樣id號為“main”的Html元素只有在Firefox中才會顯示出“background: red”的效果。

CSS Hack7：單獨針對Opera

把針對Opera的CSS代碼寫在下面CSS函數的大括弧之間
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){/*CSS代碼*/ }，如：

123	@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){#content {background: url(http://guandian.co/logo.jpg) no-repeat center top;} }

*這樣id號為“content”的Html元素只有在Opera中才會顯示出“background: url(http://guandian.co/logo.jpg) no-repeat center top”的效果。

CSS Hack8：針對Safari和Google Chrome

把針對Safari和Google Chrome的CSS代碼寫在下面CSS函數的大括弧之間
@media screen and (-webkit-min-device-pixel-ratio:0){/*CSS代碼*/ }，如：

123	@media screen and (-webkit-min-device-pixel-ratio:0){#picture {background: url(http://guandian.co/mypic.gif) no-repeat center top;}}

*這樣id號為“picture”的Html元素只有在Safari和Google Chrome中才會顯示出“background: url(http://guandian.co/mypic.gif) no-repeat center top”的效果。但是如果Safari和Google Chrome核心版本不一樣的話，CSS顯示效果也會有所偏差。

以上是我自己歸納出來的CSS Hack，但是由於本人技術水平有限，還有很多不完整或是不盡合理的地方，請大家提出來，謝謝。

http://guandian.co/program/css-hack-ie678-firefox-safari-chrome-opera/