史上最全 Css Hack彙總

每次要找個東西都得慢慢去翻自己收集的一些東西,每次都是那麼花時間,再加上有時存放時間久遠就忘了當時是存在哪了,為了方便查詢及閱讀,決定把一些csshack 收集起來...

1.區別不同瀏覽器，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;

ie6ie7ff*

√√×!important×√

√

另外再補充乙個，下劃線"_",ie6

支援下劃線，ie7

和ff均不支援下劃線。

於是大家還可以這樣來區分ie6

，ie7

，ff: background:orange

;*background:green

;_background:blue

;注：不管是什麼方法，書寫的順序都是ff的寫在前面，ie7的寫在中間，ie6的寫在最後面。

2.!important

隨著ie7對!important的支援, !important 方法現在只針對ie6的hack.(注意寫法.記得該宣告位置需要提前.)

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

用於內聯css

height:20px; /*for firefox*/

*height:25px; /*for ie7 & ie6*/

_height:20px; /*for ie6*/}5.

ie7的hack

>body

html*

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

ie6 不能識別

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

遮蔽ie瀏覽器（也就是ie下不顯示）

這裡select是選擇符，根據情況更換。第二句是mac上safari瀏覽器獨有的。

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

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

僅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彙總

史上最全的CSS hack方式一覽

史上最全C C 面試題彙總

史上最全scss教程

史上最全 Css Hack彙總

史上最全的CSS hack方式一覽

史上最全C C 面試題彙總

史上最全scss教程

相關推薦