css hack合集
Webkit內核CSS hack（Chrome、Safari、Opera）。 ?
注：很奇怪，在Windows10中的Edge（版本是13）下，竟然也起作用，莫非微軟要向Webkit看齊？
?
@media screen and (-webkit-min-device-pixel-ratio:0) { .demo {/* 這里寫只在Webkit內核的瀏覽器下起作用的樣式 */ } } Firefox CSS hack@-moz-document url-prefix(){.demo { /* 這里寫寫只在firefox中起作用的樣式*/} }
IE8/9/10/11 CSS hack @media screen\0 {.demo{ /* 這里寫在IE 8 9 10 11下起作用的樣式 */ } }
IE6/7/8 CSS hack @media \0screen\,screen\9 {.demo{/* 這里寫在IE 6 7 8 下起作用的樣式 */} }
IE9/10 CSS hack
注：IE9/10能識別CSS屬性值后面的\9\0,所以想要在IE9/10下表現出來的樣式，可以在后面加\9\0即可
此hack有一個問題，即設置的所有屬性在IE7下都不起作用，可以使用 IE6/7 的hack來修復一下
display: none\9\0;
IE6/7 CSS hack
注：IE6/7能識別CSS屬性前面的?,所以想要在IE6/7下表現出來的樣式，可以在前面面加?即可
*display:none;
IE8 CSS hack
}
IE7 CSS hack
注：IE7的單獨的CSS hack 必須結合著IE6的hack使用
*color:red;_color:green;
_color:green;
結束語：在工作中有時候我需要單獨使用IE9 hack，但是我并沒有發現有IE9的hack，如果有那位同學知道的話麻煩告知我
我寫了一個例子，大家可以拷貝到自己本地，使用各種瀏覽器測試一下：
<!DOCTYPE html>?<html?lang="zh-CN">
?<head>
?<meta?charset="UTF-8">
?<title>測試CSSHACK</title>
?<style?type="text/css">
?/* webkit css hack */
?.webkit-hack{ color:green; }
?@media screen and (-webkit-min-device-pixel-ratio:0) { .webkit-hack { color:red; } }?
/* firefox css hack */
?.firefox-hack{ color:green; }
?@-moz-document url-prefix(){ .firefox-hack{ color:red; } }?
/* IE8/9/10/11 css hack */?
.IE-hack{ color:green; }?
@media screen\0 { .IE-hack{ color:red; } }?
/* IE6/7/8 css hack */?
.IE678-hack{ color:green; }?
@media \0screen\,screen\9 { .IE678-hack{ color:red; } }
IE9/10 css hack
他有一個問題：
無法在IE7及以下起作用即在IE7及以下2個color都不起作用，文本顯示為黑色
所以可以用IE6/7的hack修復一下
聽說在傲游瀏覽器下也起作用？
那位同學試一下，并且把起作用的傲游瀏覽器版本區間告訴我
*/ .IE7-hack{color:green;*color:red;_color:green;}/* IE6 css hack */ .IE6-hack{ color:green;_color:red; } </style> </head><body><p class="webkit-hack">我在webkit內核瀏覽器下顯示為紅色，在其他非webkit內核瀏覽器下顯示為綠色</p><p class="firefox-hack">我在firefox瀏覽器下顯示為紅色，在其他瀏覽器下顯示為綠色</p><p class="IE-hack">我在IE8/9/10/11瀏覽器下顯示為紅色，在其他瀏覽器下顯示為綠色</p><p class="IE678-hack">我在IE6/7/8瀏覽器下顯示為紅色，在其他瀏覽器下顯示為綠色</p><p class="IE910-hack">我在IE9/10瀏覽器下顯示為紅色，在其他瀏覽器下顯示為綠色</p><p class="IE67-hack">我在IE6/7瀏覽器下顯示為紅色，在其他瀏覽器下顯示為綠色</p><p class="IE8-hack">我在IE8瀏覽器下顯示為紅色，在其他瀏覽器下顯示為綠色</p><p class="IE7-hack">我在IE7瀏覽器下顯示為紅色，在其他瀏覽器下顯示為綠色</p><p class="IE6-hack">我在IE6瀏覽器下顯示為紅色，在其他瀏覽器下顯示為綠色</p></body></html>
總結
以上是生活随笔為你收集整理的css hack合集的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IE8下Jquery获取select选中
- 下一篇： select下拉框兼容写法