當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css hack合集

發布時間：2025/4/16 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 css hack合集小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在前端開發中最煩人的問題莫過于瀏覽器兼容性問題了，下面是我工作依賴積累的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

@media \0screen\,screen\9 { .demo{/* 這里寫在IE8 下起作用的樣式 */} <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>測試CSS HACK</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; } } /*
}

IE7 CSS hack

注：IE7的單獨的CSS hack 必須結合著IE6的hack使用

*color:red;_color:green;

IE6 CSS hack
_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修復一下

*/.IE910-hack{ color:green;color:red\9\0;*color:green; /* 修復一下，讓IE6/7還是顯示綠色 */ } /* IE67 css hack */ .IE67-hack{ color:green; *color:red; } /* IE8 hack */ .IE8-hack{ color:green; }@media \0screen\,screen\9 { .IE8-hack{color:red;*color:green; } }/*

IE7 css hack
聽說在傲游瀏覽器下也起作用？
那位同學試一下，并且把起作用的傲游瀏覽器版本區間告訴我

*/ .IE7-hack{color:green;*color:red;_color:green;}/* IE6 css hack */ .IE6-hack{ color:green;_color:red; } </style> </head><body>我在webkit內核瀏覽器下顯示為紅色，在其他非webkit內核瀏覽器下顯示為綠色我在firefox瀏覽器下顯示為紅色，在其他瀏覽器下顯示為綠色我在IE8/9/10/11瀏覽器下顯示為紅色，在其他瀏覽器下顯示為綠色我在IE6/7/8瀏覽器下顯示為紅色，在其他瀏覽器下顯示為綠色我在IE9/10瀏覽器下顯示為紅色，在其他瀏覽器下顯示為綠色我在IE6/7瀏覽器下顯示為紅色，在其他瀏覽器下顯示為綠色我在IE8瀏覽器下顯示為紅色，在其他瀏覽器下顯示為綠色我在IE7瀏覽器下顯示為紅色，在其他瀏覽器下顯示為綠色我在IE6瀏覽器下顯示為紅色，在其他瀏覽器下顯示為綠色</body></html>

總結

以上是生活随笔為你收集整理的css hack合集的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： IE8下Jquery获取select选中
下一篇： select下拉框兼容写法