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

來源:互聯網
上載者:User
文章目錄
  • 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/

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。