CSS的Hack大蒐集

hack在css的編寫中是經常被用到的一種技術。之所以出現了hack，是因為各個瀏覽器的解析有專屬於自己的寫法的。這也是css的神奇之處之一。不過，hack雖然是如此的好用，作為前端寫**的我們來說，用它絕對是快準狠的解決了問題，但是不太推薦大家用hack。

hack的技術是針對不同瀏覽器寫不同的樣式，讓瀏覽器達到不同的渲染效果。實現每個瀏覽器不同的渲染效果，可以用條件樣式，也可以用hack。下面就是我收集的一些hack的各種方法。

1、firefox

@-moz-document url-prefix() 
}

支援firefox的還有幾種寫法：

/* 支援所有firefox版本 */
#div1[id=div1]

或

@-moz-document url-prefix()  }

或

/* 支援所有gecko核心的瀏覽器 (包括firefox) */
*>.div1

2、webkit枘核瀏覽器(chrome and safari)

@media screen and (-webkit-min-device-pixel-ratio:0)	
}

上面寫法主要是針對webkit核心的瀏覽器，如google chrome 和 safari瀏覽器：

@media screen and (-webkit-min-device-pixel-ratio:0)	
}

3、opera瀏覽器

4、ie9瀏覽器

:root div

5、ie9以及ie9以下版本

div

6、ie8瀏覽器

div

或

@media \0screen
}

7、ie8以及ie8以上的版本

div

8、ie7瀏覽器

*+html div

或

*:first-child+html div

9、ie7及ie7以下版本瀏覽器

div

10、ie6瀏覽器

div

或

div

或

*html div

上面的內容是我收集的一些各個版本瀏覽器下如何識別各種的hack寫法，包括了現代瀏覽器還有就是很奇葩的瀏覽器。接下來是css選擇器和css屬性選擇器在不同瀏覽器的支援情況

1、ie6

* html div

2、僅僅ie7瀏覽器

*:first-child+html div

3、除ie6之外的所有瀏覽器(ie7-9, firefox,safari,opera)

html>body div

4、ie8-9,firefox,safari,opear

html>/**/body div

5、ie9+

:root div

6、firefox瀏覽器

@-moz-document url-prefix() 
}

6、webkit核心瀏覽器(safari和google chrome)

@media screen and (-webkit-min-device-pixel-ratio:0)	
}

7、opera瀏覽器

8、iphone / mobile webkit

@media screen and (max-device-width: 480px) 
}

上面為大家介紹的是有關各個瀏覽器關於css的hack的寫法，基中有針對於現代瀏覽器safari,google chrome和firefox的寫法還有前端們最討厭的ie家族的hack寫法。下面是一些綜合小技巧：

一、方法一：

div 
@media all and (min-width:0px)
@media screen and (-webkit-min-device-pixel-ratio:0) 
@-moz-document url-prefix()/* all firefox */
}

二、方法二：

1、建立條件樣式表，並在html中body裡新增相應的class類名

html**：

css**：

div /*現代瀏覽器*/
.non-ie div /*除ie外瀏覽器*/
.ie9 div /*ie9瀏覽器*/
.ie8 div/*ie8瀏覽器*/
.ie7 div /*ie7瀏覽器*/
.ie6 div /*ie6瀏覽器*/
@media all and (min-width: 0px) /* webkit and opera */
}@media screen and (-webkit-min-device-pixel-ratio:0)/* webkit */
}@-moz-document url-prefix()/* firefox * /
}

CSS的Hack大蒐集

認識css常見的hack

css條件Hack屬性

資料大蒐集一

CSS的Hack大蒐集

認識css常見的hack

css條件Hack屬性

資料大蒐集 一

相關推薦

資料大蒐集一