首頁 > web前端 > css教學 > css的hack技術使用匯總

css的hack技術使用匯總

伊谢尔伦
發布: 2017-06-07 11:57:49
原創
3024 人瀏覽過

什麼是CSS css的hack技術使用匯總?

在web開發中,我們常會遇到各瀏覽器表現不一致的情況,由於不同廠商的流覽器或某瀏覽器的不同版本,對CSS的支援、解析不一樣,導致 在不同瀏覽器的環境中呈現不一致的頁面展現效果。這時,我們為了獲得統一的頁面效果,就需要針對不同的瀏覽器或不同版本寫出特定的CSS樣式 ,我們把這個針對不同的瀏覽器/不同版本寫對應的CSS code的過程,叫做CSS css的hack技術使用匯總!  

下面就來談一談CSS css的hack技術使用匯總 技術的使用:

css的hack技術使用匯總

#CSS css的hack技術使用匯總 技術

#1. 詳解css css的hack技術使用匯總的分類和css css的hack技術使用匯總三種方式

详解css 

css的hack技術使用匯總的分类和css css的hack技術使用匯總三种方式

css css的hack技術使用匯總 分類
有三種表現形式,css屬性前綴法,選擇器前綴法,以及IE條件註解法。

屬性前綴法(即類別內部css的hack技術使用匯總)

選擇器前綴法

IE條件註解法
css css的hack技術使用匯總一般是將適用範圍廣,被辨識能力強的css定義在前面。

2. 用CSS css的hack技術使用匯總技術解決瀏覽器相容性問題

 CSS Hack大致有3種表現形式:CSS屬性Hack、CSS選擇符Hack以及IE條件註Hack, Hack主要針對IE瀏覽器。

  a、屬性級Hack:例如IE6能辨識底線"_"和星號" * ",IE7能辨識星號" * ",但無法辨識底線 "_",而firefox兩個都不能認識。等等

  b、選擇符級Hack:例如IE6能辨識*html .class{},IE7能辨識*+html .class{}或*:first-child+html .class{}。等等

  c、IE條件註解Hack:例如針對所有IE:,針對IE6及以下版本:,這類Hack不僅對CSS生效, 對寫在判斷語句裡面的所有程式碼都會生效。

3. 不同瀏覽器的CSS css的hack技術使用匯總寫法介紹

差異IE6與FF: 
backgroundrange;*blue;
區別IE6與IE7: 
background:green !important;blue;
區別IE7與FF: 
backgroundrange; *background:green; 
區別FF,IE7,IE6:
backgroundrange;*background:green !important;*blue;

4. 最完整的CSS css的hack技術使用匯總方式一覽(相容多瀏覽器)

#一般情況下,我們盡量避免使用CSS css的hack技術使用匯總,但是有些情況為了顧及用戶體驗實現向下兼容,不得已才使用css的hack技術使用匯總。例如由於IE8及以下版本不支援 CSS3,而我們的專案頁面使用了大量CSS3新屬性在IE9/Firefox/Chrome下正常渲染,這種情況下如果不使用css3pie或htc或條件註釋等方法時,可能 就得讓IE8-的專屬css的hack技術使用匯總出馬了。使用css的hack技術使用匯總雖然對頁面表現的一致性有好處,但過多的濫用會造成html文件混亂不堪,增加管理和維護的負擔。

5. CSS css的hack技術使用匯總

由於不同的瀏覽器,甚至同一瀏覽器的不同版本對CSS的解析認識不一樣,導致產生的頁面效果不一致,寫出針對不同瀏覽器CSS code稱為 CSS css的hack技術使用匯總。

常用的CSS css的hack技術使用匯總 有三種方式,CSS 內部css的hack技術使用匯總、選擇器css的hack技術使用匯總、HTML 頭部引用,其中第一種最常用。

6. CSS Hack收集匯總

屏蔽IE瀏覽器(也就是IE下不顯示) 
*:lang(zh) select { font:12px !important;} /*FF的專用*/ 
select:empty {font:12px !important;} /*safari可見*/ 
這裡select是選擇符,根據情況更換。第二句是MAC上safari瀏覽器獨有的。 
僅 IE7辨識 

相關問答

#1. css css的hack技術使用匯總的問題

2. 一個關於IE版本HACK的問題

#

3. input text文字選取改變預設顏色,safari不支持,還有什麼其他css的hack技術使用匯總方案麼

【相關推薦】

1. php中文網免費影片教學:《php.cn獨孤九賤(2)-css影片教學》


#

以上是css的hack技術使用匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板