區別不同瀏覽器的CSS hack寫法

2021-05-31 22:01:12 字數 2719 閱讀 7934

區別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;

ie6ie7ff*

√√×!important×√

√另外再補充乙個,下劃線"_",ie6支援下劃線,ie7和ff均不支援下劃線。於是大家還可以這樣來區分ie6,ie7,ff: background:orange;*background:green;_background:blue; 注:不管是什麼方法,書寫的順序都是ff的寫在前面,ie7的寫在中間,ie6的寫在最後面。

2.!important

3.ie6/ie7對ff

1.*+html 與 *html 是ie特有的標籤, firefox 暫不支援.而*+html 又為 ie7特有標籤.

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

3.用於內聯css

5.ie7的hack

>bodyhtml**+html 這三種寫法,其中前兩種都是不合法的 css 寫法,在標準相容瀏覽器中被被忽略,但是 ie7 卻不這麼認為。 對於 >body ,它會將缺失的選擇符用全域性選擇符 * 代替,也就是將其處理成了 *>body,而且不光對於 > 選擇符,+,~ 選擇符中這個現象也存在。對於 html* ,由於 html 和 * 之間沒有空格,所以也是一種 css 語法錯誤,但 ie7 不會忽略,而是錯誤地認為這裡有乙個空格。對於第三種 *+html,ie7 認為 html 前面的 dtd 宣告也是乙個元素,所以 html 會被選中,這三種方法中只有這一種方法是合法的 css 寫法,也就是說可以通過校驗器的驗證,因此也是作者推薦的 hack 用法。

6.ie6 不能識別

html/* */ >body  #box  ie6 字型不會變成紅色

7.遮蔽ie瀏覽器(也就是ie下不顯示)

8.僅ie7與ie5.0可以識別

*+html  select 當面臨需要只針對ie7與ie5.0做樣式的時候就可以採用這個hack。

9.僅ie7可以識別

*+html  select 當面臨需要只針對ie7做樣式的時候就可以採用這個hack。 

10.ie6及ie6以下識別

* html  select 這個地方要特別注意很多部落格都寫成了是ie6的hack其實ie5.x同樣可以識別這個hack。其它瀏覽器不識別。html/**/ >body  select 這句與上一句的作用相同。 

11.僅ie6不識別,遮蔽ie6

select 這裡主要是通過css注釋分開乙個屬性與值,注釋在冒號前。

12.僅ie6與ie5不識別,遮蔽ie6與ie5

select/**/ 這裡與上面一句不同的是在選擇符與花括號之間多了乙個css注釋。不遮蔽ie5.5

13.僅ie5不識別,遮蔽ie5

select/*ie5不識別*/ 這一句是在上一句中去掉了屬性區的注釋。只有ie5不識別,ie5.5可以識別。

14.盒模型解決方法

select \""; voice-family:inherit; width:正確寬度;}盒模型的清除方法不是通過!important來處理的。這點要明確。

15.盒模型解決方法

select:after 在firefox中,當子級都為浮動時,那麼父級的高度就無法完全的包住整個子級,那麼這時用這個清除浮動的hack來對父級做一次定義,那麼就可以解決這個問題。

16.只有opera識別

@media all and (min-width: 0px) }針對opera瀏覽器做單獨的設定。

17.ie5.x的過濾器,只有ie5.x可見

@media tty } @import 'ie5win.css'; /*";}}/* */

18.ie5/mac的過濾器,一般用不著

@media all and (min-width: 0px) }針對opera瀏覽器做單獨的設定。

區別不同瀏覽器,CSS hack寫法

區別 ie6 與 ff background orange background blue 區別 ie6 與 ie7 background green important background blue 區別 ie7 與 ff background orange background green 區...

區別不同瀏覽器,CSS hack寫法

區別 ie6與 ff background orange background blue 區別 ie6與 ie7 background green important background blue 區別 ie7與 ff background orange background green 區別 f...

區別不同瀏覽器,CSS hack寫法!

區別ie6與ff background orange background blue 區別ie6與ie7 background green important background blue 區別ie7與ff background orange background green 區別ff,ie7,i...