浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer

Kelvin — Thu, 27 May 2010 00:24:52 +0000

<!doctype html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS Browser Hackstitle>
<style>
body p {
display: none;
}
/* Opera */
html:first-child #opera {
display: block;
}
/* IE 7 */
html > body #ie7 {
*display: block;
}
/* IE 6 */
body #ie6 {
_display: block;
}
/* Firefox 1 - 2 */
body:empty #firefox12 {
display: block;
}
/* Firefox */
@-moz-document url-prefix() {
#firefox {
display: block;
}
}
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari {
display: block;
}
}
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body #opera {
display: block;
}
}
style>
head>
<body>
我来自 Opera 7.2 - 9.5p>
我是神奇的 Safarip>
我来自 Firefoxp>
我是你爷爷 Firefox 1 - 2 p>
我是囧 IE 7p>
我是脑瘸 IE 6p>
body>
html>

两个不太常用的 CSS Hack

Kelvin — Wed, 17 Dec 2008 01:44:30 +0000

1、仅 Safari 和 Opera 识别的 Hack

或者

@media screen and (-webkit-min-device-pixel-ratio:0) {/* Safari and Opera rules here */}

注：这里所指代的 Safari 和 Opera 一般为最新版本。

2、仅 Firefox 3 和 IE7 识别的 Hack

注：由于 Firefox 2 和 Firefox 3 共存，且两个版本对 CSS 的解析有部分不一致，或许用得着这个 Hack 。