網站首頁 | 公司介紹 | 服務項目 | 作品展示 | 聯系方式

首頁 >> 設計技巧設計技巧
CSS hack 詳解——廊坊網頁制作

由于不同的瀏覽器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,對CSS的解析認識不一樣,因此會導致生成的頁面效果不一樣,得不到我們所需要的頁面效果。

這個時候我們就需要針對不同的瀏覽器去寫不同的CSS,讓它能夠同時兼容不同的瀏覽器,能在不同的瀏覽器中也能得到我們想要的頁面效果。

這個針對不同的瀏覽器寫不同的CSS code的過程,就叫CSS hack,也叫寫CSS hack。

CSS Hack的原理是什么

由于不同的瀏覽器對CSS的支持及解析結果不一樣,還由于CSS中的優先級的關系。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。

比如 IE6能識別下劃線_和星號*,IE7能識別星號*,當不能識別下劃線_,而firefox兩個都不能認識。等等

書寫順序,一般是將識別能力強的瀏覽器的CSS寫在后面。下面如何寫里面說得更詳細些。

如何寫CSS Hack

比如要分辨IE6和firefox兩種瀏覽器,可以這樣寫:
程序代碼

   1. <style>  
   2. div{  
   3.     background:green; /* for firefox */  
   4.     *background:red;   /* for IE6 */  
   5. }  
   6. </style>  
   7. <div>我在IE6中看到是紅色的,在firefox中看到是綠色的。</div>  


<style> div{ background:green; /* for firefox */ *background:red; /* for IE6 */ } </style> <div>我在IE6中看到是紅色的,在firefox中看到是綠色的。</div>

解釋一下:
上面的css在firefox中,它是認識不了后面的那個帶星號*的東東是什么的,于是將它過濾掉,不予理睬,解析得到的結果是:div{background:green},于是理所當然這個div的背景是綠色的。
在IE6中呢,它兩個background都能識別出來,它解析得到的結果是:div{background:green;background:red;},于是根據優先級別,處在后面的red的優先級高,于是當然這個div的背景顏色就是紅色的了。


CSS hack:區分IE6,IE7,firefox
區別不同瀏覽器,CSS hack寫法:

區別IE6與FF:
       background:orange;*background:blue;

區別IE6與IE7:
       background:green !important;background:blue;

區別IE7與FF:
       background:orange; *background:green;

區別FF,IE7,IE6:
       background:orange;*background:green !important;*background:blue;

注:IE都能識別*;標準瀏覽器(如FF)不能識別*;
IE6能識別*,但不能識別 !important,
IE7能識別*,也能識別!important;
FF不能識別*,但能識別!important;

               IE6     IE7     FF
*               √     √     ×
!important       ×     √     √


另外再補充一個,下劃線"_",
IE6支持下劃線,IE7和firefox均不支持下劃線。

于是大家還可以這樣來區分IE6,IE7,firefox
: background:orange;*background:green;_background:blue;

注:不管是什么方法,書寫的順序都是firefox的寫在前面,IE7的寫在中間,IE6的寫在最后面。

關于CSS HACK總結一下。

1, !important

隨著IE7對!important的支持, !important 方法現在只針對IE6的HACK.
(注意寫法.記得該聲明位置需要提前.)
程序代碼

<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>


2, IE6/IE77對FireFox
1.
*+html 與 *html 是IE特有的標簽, firefox 暫不支持.
而*+html 又為 IE7特有標簽.
程序代碼

<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */
}
</style>


注意:
*+html 對IE7的HACK 必須保證HTML頂部有如下聲明,
程序代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


2.
表達方式:+property:value
測試環境:IE5,IE6 ,IE7,FF1.5,FF2.0,Opera 9,Safari 2
測試結果:
IE5,IE6 ,IE7瀏覽器識別;
FF2.0,Opera 9,Safari 2瀏覽器不識別。

結論:我們可以用"+"來實現只有IE識別的CSS Hack。

比如我們要實現在IE中500px的寬度,而在其他瀏覽器480px的寬度,就可以通過"+" Hack來完成,如下:
程序代碼

#hack {
width:500px;
+width:480px; /*only IE*/
}


3.
用于內聯css
程序代碼

height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/


4.
程序代碼

#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */


3,IE7的hack

IE7 修復了很多 bug,也增加了對一些選擇符的支持,所以現在諸如 *html {} 和 html>body {} 等針對 IE 隱藏或顯示的 hack 都會在 IE7 中失效。雖然 CSS Hack 不推薦使用,條件注釋才是萬無一失的過濾器,但是條件注釋只能出現在 HTML 中,CSS Hack 還是有用武之地的。Nanobot 發現了一些針對 IE7 的 CSS Hack,具體就是:
程序代碼

>body
html*
*+html


這三種寫法,其中前兩種都是不合法的 CSS 寫法,在標準兼容瀏覽器中被被忽略,但是 IE7 卻不這么認為。對于 >body ,它會將缺失的選擇符用全局選擇符 * 代替,也就是將其處理成了 *>body,而且不光對于 > 選擇符,+,~ 選擇符中這個現象也存在。對于 html* ,由于 html 和 * 之間沒有空格,所以也是一種 CSS 語法錯誤,但 IE7 不會忽略,而是錯誤地認為這里有一個空格。對于第三種 *+html,IE7 認為 html 前面的 DTD 聲明也是一個元素,所以 html 會被選中,這三種方法中只有這一種方法是合法的 CSS 寫法,也就是說可以通過校驗器的驗證,因此也是作者推薦的 hack 用法。
程序代碼

IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>/**/body {} to select the body element


4,區別IE的版本
程序代碼

<!--[if IE]> Only IE <![endif]-->
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
<!--[if lt IE 6]> Only IE 6- <![endif]-->
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
<!--[if lte IE 7]> Only IE 7/- <![endif]-->


注意
1.條件注釋的基本結構和HTML的注釋()是一樣的。因此IE以外的瀏覽器將會把它們看作是普通的注釋而完全忽略它們。
2.IE將會根據if條件來判斷是否如解析普通的頁面內容一樣解析條件注釋里的內容。
3. 條件注釋使用的是HTML的注釋結構,因此他們只能使用在HTML文件里,而不能在CSS文件中使用。我很想把所有特殊的樣式放在logo.css里。但是很不幸的是,這看起來不太可能。我也試過根據條件注釋,使用來導入一個額外的樣式表,但是因為我只需要一個額外的樣式規則,這樣會讓事情變得復雜很多。當然如果你需要在IE里使用很多的額外的樣式,那么使用或許是一個好的方法。
就象這樣:

程序代碼
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->


For Non-IE:
在注釋中嵌套注釋,這樣首尾還原為兩個注釋,所以非IE瀏覽器可以顯示中間的內容;而IE識別到“!IE”,所以將整個語句當成否定條件判斷而不顯示中間的內容。利用這樣的用法即可在非IE中應用 Conditional Comments,酷!
程序代碼

<!--[if !IE]><!--> COOL!!! Non-IE <!--<![endif]-->
<!--[if IE 6]><!--> IE6 or Non-IE <!--<![endif]-->


說明:

gt: greater than,選擇條件版本以上版本,不包含條件版本
lt: less than,選擇條件版本以下版本,不包含條件版本
gte: greater than or equal,選擇條件版本以上版本,包含條件版本
lte : less than or equal,選擇條件版本以下版本,包含條件版本
!: everything except what directly follows the "!"(選擇條件版本以外所有版本,無論高低)

版權所有 © 2010-2012 廊坊易路設計公司 冀ICP備09040021號地址:廊坊市建國道東方新天地427室 郵箱:quanmiao@yahoo.cn
高频彩全能王计划 四川快乐12定牛走势 nba让分胜负怎么看 四川金7乐中奖助手 平码三+0为杀肖 欢乐生肖冷热号遗漏 河内五分彩稳赚方法技巧 北京赛车澳客 赢彩彩票与你同行六玛 幸运彩票平台电话 重庆欢乐生肖代表号码 浙江11选5计算器 足彩单场 曾道人特码资料彩图 福彩辽宁35选7走势图百度百度贴吧 天津时时彩lm0 多乐彩购彩网