CSS Hacks，Firefox 3.5和谷歌Chrome

Question

我搜索了周圍，據稱，body:nth-of-type(1)被用於CSS只針對Safari和谷歌瀏覽器。

你看，Mozilla也正確讀取它。我搜索了十次，但沒有提出什麼，所以我在這裏。

有沒有Google Chrome瀏覽器的CSS破解？

Answer 1

@media screen and (-webkit-min-device-pixel-ratio:0) { ... styles go here ... }

沒有爲僅鉻（據我所知），但Chrome和Safari沒有CSS。你可以考慮一個Javascript解決方案。

更新2013年1月22日：正如評論中所述，這可能不再安全。我找不到合適的替代品。

Answer 2

任何-webkit選擇器都適用於Chrome和Safari。

http://qooxdoo.org/documentation/general/webkit_css_styles

希望這是你在找什麼。這裏的WebKit的網站：

http://webkit.org/

Answer 3

這是最好的避免這類黑客，因爲他們依賴於新興標準的可用性。很明顯，隨着時間的推移，新興的標準將越來越多地在更多的平臺上可用。換句話說，假設給定的瀏覽器是[某些特定的瀏覽器]是錯誤的，因爲它具有[某些特定的CSS功能]。

Eric Wendelin的回答是針對WebKit瀏覽器的一個很好的答案。還有目標Gecko瀏覽一個好辦法：

@-moz-document url-prefix() { 
    /* Gecko-specific CSS here */ 
} 

添加在WebKit的目標（感謝埃裏克溫德林）：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Webkit-specific CSS here */ 
} 

你或許可以也可靠地使用CSS黑客的「功能檢測」風格在之內的結構類似於隔離版本，因爲您已經正確隔離了引擎，並且您可以更安全地假定給定引擎的版本之間的功能差異不會隨時間而改變。

顯然，隔離IE及其各種版本的最佳方式是使用條件註釋，IE支持許多版本。

Answer 4

@supports功能檢測適用於Chrome 28及更新版本。

/* Chrome 28+ */ 

@supports (-webkit-appearance:none) { .selector { color:red; } } 

我張貼這browserhacks - 所以無論是在browserhacks.com或http://browserstrangeness.bitbucket.org/css_hacks.html#chrome我的Live個人的CSS黑客試驗場進行測試。

還有很多其他人，我已經制定了具體的新版本。我希望你喜歡它們。