(转载)IE6/IE7/IE8/IE9/FF的CSS Hacks

IE6/IE7/FF 的 CSS Hacks

区别 IE 和非 IE 浏览器

1
2
3
4
#tip {
background: blue; /*非IE 背景藍色*/
background: red \9; /*IE6、IE7、IE8背景紅色*/
}

区别 IE6,IE7,IE8,FF

【区别符号】:\9*_

【示例】:

1
2
3
4
5
6
#tip {
background: blue; /*Firefox 背景变蓝色*/
background: red \9; /*IE8 背景变红色*/
*background: black; /*IE7 背景变黑色*/
_background: range; /*IE6 背景变橘色*/
}

【说明】:因为 IE 系列浏览器可读\9,而 IE6 和 IE7 可读 *(米字号),另外 IE6 可辨识 _(底线),因此可以依照顺序写下来,就会让浏 览器正确的读取到自己看得懂得 CSS 语法,所以就可以有效区分 IE 各版本和非 IE 浏览器(像是 Firefox、Opera、Google Chrome、Safari 等)。

区别 IE6、IE7、Firefox (方法 1)

【区别符号】:*_
【示例】:

1
2
3
4
5
#tip {
background: blue; /*Firefox背景变蓝色*/
*background: black; /*IE7 背景变黑色*/
_background: orange; /*IE6 背景变橘色*/
}

【说明】:IE7 和 IE6 可读 *(米字号),IE6 又可以读 _(底线),但是 IE7 却无法读取 _,至于 Firefox(非 IE 浏览器)则完全无法辨识 *_,因此就可以透过这样的差异性来区分 IE6、IE7、Firefox。

区别 IE6、IE7、Firefox (方法 2)

【区别符号】:*!important
【示例】:

1
2
3
4
5
#tip {
background: blue; /*Firefox 背景变蓝色*/
*background: green !important; /*IE7 背景变绿色*/
*background: orange; /*IE6 背景变橘色*/
}

【说明】:IE7 可以辨识 *!important,但是 IE6 只可以辨识 *,却无法辨识 !important,至于 Firefox 可以读取 !important 但不能辨识 * 因此可以透过这样的差异来有效区隔 IE6、IE7、Firefox。

区别 IE7、Firefox

【区别符号】:*!important
【示例】:

1
2
3
4
#tip {
background: blue; /*Firefox 背景变蓝色*/
*background: green !important; /*IE7 背景变绿色*/
}

【说明】:因为 Firefox 可以辨识!important 但却无法辨识 *,而 IE7 则可以同时看懂 _!important,因此可以两个辨识符号来区隔 IE7 和 Firefox。

区别 IE6、IE7 (方法 1)

【区别符号】:*_
【示例】:

1
2
3
4
#tip {
*background: black; /*IE7 背景变黑色*/
_background: orange; /*IE6 背景变橘色*/
}

【说明】:IE7 和 IE6 都可以辨识 *(米字号),但 IE6 可以辨识 _(底线),IE7 却无法辨识,透过 IE7 无法读取 _ 的特性就能轻鬆区隔 IE6 和 IE7 之间的差异。

区别 IE6、IE7 (方法 2)

【区别符号】:!important
【示例】:

1
2
3
4
#tip {
background: black !important; /*IE7 背景变黑色*/
background: orange; /*IE6 背景变橘色*/
}

【说明】:因为 IE7 可读取 !important; 但 IE6 却不行,而 CSS 的读取步骤是从上到下,因此 IE6 读取时因无法辨识 !important 而直接跳到下一行读取 CSS,所以背景色会呈现橘色。

区别 IE6、Firefox

【区别符号】:_
【示例】:

1
2
3
4
#tip {
background: black; /*Firefox 背景变黑色*/
_background: orange; /*IE6 背景变橘色*/
}

【说明】:因为 IE6 可以辨识 _(底线),但是 Firefox 却不行,因此可以透过这样的差异来区隔 Firefox 和 IE6,有效达成 CSS hack。

IE-6 ONLY

1
2
3
* html #div {
height: 300px;
}

NON IE-7 ONLY

1
2
3
#div {
_height: 300px;
}

Hide from IE 6 and LOWER

1
2
3
4
5
6
#div {
height/**/: 300px;
}
html > body #div {
height: 300px;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/* Opera */
html:first-child #opera {
display: block;
}
/* IE 7 */
*:first-child + html {
background-color: #f00;
}
/* IE 7 */
html > body #ie7 {
*display: block;
}
/* IE 6 */
* html #div {
background-color: #f00;
}
/* IE 6 */
body #ie6 {
_display: block;
}

/*IE7及其更低版本*/
*:first-child + html {
}
*html {
}

/*IE7,IE7以上和主流浏览器*/
html > body {
}

/*适合主流浏览器(IE7排除在外,IE7以下的也不行)*/
html>/**/body {
}
/* 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;
}
}

最新的浏览器 CSS Hacks

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/* IE6 and below */
* html #uno {
color: red;
}

/* IE7 */
*:first-child + html #dos {
color: red;
}
* + html #dieciocho {
color: red;
}

/* Safari 2-3 */
html[xmlns*=''] body:last-child #seis {
color: red;
}

/* webkit and opera */
@media all and (min-width: 0px) {
.big {
padding: 11px;
}
}

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.big {
padding: 11px;
}
}

/* opera */
@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {
.big {
padding: 11px;
}
}

/* firefox * /
@-moz-document url-prefix(){ .big{padding:11px;}} /* all firefox */
#veinticinco,
x:-moz-any-link,
x:default {
color: red;
} /* Firefox 3.0+ */
html>/**/body .big, x:-moz-any-link, x:default {
padding: 11px;
} /* newest firefox */

css-hack

ps:IE6 不支持 !important,是指不支持 important 的优先级,并不影响 css 属性值的解析。比如 color:green!important;color:red;,除了在 IE6 下字体颜色解析为红色,其他(你懂的)浏览器下都是绿色。

---- 本文结束,感谢您的阅读 ----