CSS Hack技術解決多瀏覽器相容問題

2022-07-16 08:15:18 字數 2533 閱讀 1608

本文向大家描述一下如何使用css hack技巧解決div+css布局多瀏覽器相容問題,針對不同的瀏覽器寫不同的css**的過程,就叫css hack,相信本文介紹一定會讓你有所收穫。

css hack技巧彙總

css hack簡介

我們在用div+css製作網頁時,由於不同的瀏覽器,比如 internetexplorer6,internetexplorer7,mozillafirefox等對css的支援及解析結果不一樣,導致生成的 頁面效果不一樣,得不到我們所需要的頁面效果。這時候我們就需要針對不同的瀏覽器去寫不同的css,讓它能夠同時相容不同的瀏覽器,能在不同的瀏覽器中也 能得到我們想要的頁面效果。這個針對不同的瀏覽器寫不同的css**的過程,就叫css hack。

為了向你展示這些css hack是否正常運作,我新建六個p標籤,並給每乙個p標籤乙個特有的id。這將向你展示css hack的運作情況。

我來自opera7.2-9.5p> 

我是神奇的safarip> 

我來自firefoxp> 

我是ff前輩firefox1-2p> 

我是ie7p> 

我是殘品ie6p> 

然後我讓這些p標籤預設都不顯示

bodyp  

style> 

使用ie css條件注釋區分ie瀏覽器

最簡單的區分ie瀏覽器的方法自然是使用他們的條件注釋。微軟建立了乙個強大的語法來讓我們去實現這個功能。我不想再詳細地介紹ie條件注釋了,我想你在搜尋引擎能搜尋到上萬個搜尋條目,我這裡只要這兩個:

style> 

style> 

使用css解析器hacks區分ie

雖說ie條件注釋十分簡單好用,但是如果你想把全部的css放到乙個檔案裡的話,那麼你不得不使用別的方法。注意這裡的ie7hack將只對ie7有效,因為ie6根本不知道》選擇符。同時你也得注意》選擇符對於其他瀏覽器同樣是無效的。

/*ie7*/  

html>body#ie7  

/*ie6*/  

body#ie6  

css hack區分firefox

第乙個使用了body:empty來區分firefox1和2。第二個hack使用了全部firefox瀏覽器的專有擴充套件-moz。-moz只對firefox有效,使用這個hack大可不必擔心其他瀏覽器的影響。

/*firefox1-2*/  

body:empty#firefox12  

/*firefox*/  

@-moz-documenturl-prefix()  

}css hack區分safari

safari的css hack與firefox的hack看起來很像,使用的是safari瀏覽器的專有擴充套件-webkit且只對safari瀏覽器有效。

/*safari*/  

@mediascreenand(-webkit-min-device-pixel-ratio:0)  

}css hack區分opera

/*opera*/  

@mediaalland(-webkit-min-device-pixel-ratio:10000),  

notalland(-webkit-min-device-pixel-ratio:0)  

}  然後,全部合在一起便是完整**:

"">   

cssbrowserhackstitle> 

bodyp  

/*opera*/  

html:first-child#opera  

/*ie7*/  

html>body#ie7  

/*ie6*/  

body#ie6  

/*firefox1-2*/  

body:empty#firefox12  

/*firefox*/  

@-moz-documenturl-prefix()  

}  /*safari*/  

@mediascreenand(-webkit-min-device-pixel-ratio:0)  

}  /*opera*/  

@mediaalland(-webkit-min-device-pixel-ratio:10000),  

notalland(-webkit-min-device-pixel-ratio:0)  

}  style> 

head> 

我來自opera7.2-9.5p> 

我是神奇的safarip> 

我來自firefoxp> 

我是ff前輩firefox1-2p> 

我是囧ie7p> 

我是殘品ie6p>body> 

html> 

css hack雖好且方便相容各瀏覽器,但是通不過w3c驗證,所以還得自己權衡是否有必要去使用。

解決瀏覽器相容 CSS HACK

我們在做頁面時不可避免的會碰到瀏覽器相容問題,特別是 ie6,那麼要如何相容所有瀏覽器呢,答案是 css hack。還有一些 css hack 我沒用羅列出來,譬如 chrome,opera 等等。對於這些通常情況下我們是用不到的。測試的瀏覽器 ie6 9,firefox,chrome ps 最好的...

css 解決瀏覽器相容 css hack

我們在做頁面時不可避免的會碰到瀏覽器相容問題,特別是 ie6,那麼要如何相容所有瀏覽器呢,答案是 css hack。還有一些 css hack 我沒用羅列出來,譬如 chrome,opera 等等。對於這些通常情況下我們是用不到的。測試的瀏覽器 ie6 9,firefox,chrome ps 最好的...

css瀏覽器相容(一) css hack技術

css hack技術 1.css hack的定義 指一種改善css在不同瀏覽器下表現形式的技巧方法。它利用的是瀏覽器的bug。注 css執行的順序是後乙個總是覆蓋前乙個 2.css的方法 1 import 用於ie4的區分 import ie4不能解析 例 import url newstyle.c...