首頁 > 開發者 > 網站開發

瀏覽器css hack

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

(1)*:  IE6+IE7都能識別*,而標準瀏覽器FF+IE8是不能識別*的;

(2)!important: 除IE6不能識別 !important外,  FF+IE8+IE7都能識別!important ;

(3)_ : 除IE6支援_ 外,  FF+IE8+IE7都不支援_;

(4)\9:所有IE瀏覽器都識別(IE6、IE7、IE8、IE9)

 

樣本:

(1)區別FF(IE8)與IE6 IE7

backgorund:orange; FF和IE8背景色將為橘黃色

*backgorund:red;   IE6和IE7背景色將為紅色

(2)區別FF(IE8)與IE6與IE7

background:orange;   FF和IE8背景色將為橘黃色

*background:red !important;  IE7背景色將為紅色

*background:blue;     IE6背景色將為藍色

(3)區別FF(IE8)與IE6與IE7

background:orange;        FF和IE8背景色將為橘黃色

*background:red;          IE7背景色將為紅色

_background:blue;         IE6背景色將為藍色

(4)區別FF與IE6 IE7 IE8 IE9

color:gray;       FF等非IE瀏覽器字型色將為灰色

color:red\9;     IE8 IE9字型色將為紅色

*color:green;     IE7字型色將為綠色

_color:blue;     IE6字型色將為藍色

提示:CSS HACK書寫順序:先寫FF等非IE瀏覽器所需樣式，其次寫IE8所需樣式，接著是IE7的，再接著才是IE6的！

總結:實際運用中我感覺比較少用到!important ,只要你記住”*”和”_”我想就足夠區別於FF(IE8)與IE6與IE7了.

 

 

1、Css if hack條件文法
< !--[if IE]> Only IE <![endif]-->
僅所有的WIN系統內建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 gte IE 7]> Only IE 7/+ <![endif]-->
IE7以及IE7以下的IE6、IE5.x都可識別

<!--[if IE 8]> Only IE 8/- <![endif]-->
僅IE8可識別

<!--[if IE 9]> Only IE 9/- <![endif]-->
僅IE9可識別

 

注：在 if  後加 lt gte有不同效果 （參加其它參數同理）

  • <!–[if IE 8]> = IE8 僅IE8可識別
  • <!–[if lt IE 8]> = IE7或更低版本

<!–[if gte IE 8]> = 高於或者等於IE8版本

 

 

 

2、DIV+CSS執行個體
CSS執行個體一：
讓IE6-IE8顯示不同的內容，DIV CSS代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV IF條件執行個體</title>
</head>
<body>
你正在使用：
<!--[if IE 7]> 
<h2>IE7</h2>
<![endif]-->
<!--[if IE 6]> 
<h2>IE6</h2>
<![endif]-->
<!--[if IE 8]> 
<h2>IE8</h2>
<![endif]-->

<!--[if IE 9]> 
<h2>IE9</h2>
<![endif]-->
<br><br>
<strong>說明</strong>：如果你的瀏覽器版本為多少即會顯示IE多少，針對IE6-IE9實驗</body>
</html>

 

說明：以上針對不同IE顯示不同網頁內容DIV+CSS執行個體實驗。

DIV+CSS執行個體二：
讓IE6-IE8顯示不同CSS樣式效果，DIV CSS代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS IF條件hack執行個體</title>
<!--[if IE 6]> 
<style type="text/css">
.divcss{ color:#F00;}
</style>
<![endif]-->
<!--[if IE 7]> 
<style type="text/css">
.divcss{ color:#FF0;}
</style>
<![endif]-->
<!--[if IE 8]> 
<style type="text/css">
.divcss{ color:#00F;}
</style>
<![endif]-->

<!--[if IE 9]> 
<style type="text/css">
.divcss{ color:#000;}
</style>
<![endif]-->
</head>
<body>
<div class="divcss">
DIV CSS實驗提示：<br>
我在IE6下是紅顏色，在IE7下是黃顏色,在IE8下是藍顏色,在IE9下是黑色
</div>
</body>
</html>

 

瀏覽器css hack

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

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

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

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More