CSS浏览器hack

CSS检测浏览器

适用与Internet Explorer、Firefox、Safari和Chrome的更新版本

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Browser: 
<span class="firefox">Firefox</span>
<span class="msie">Internet Explorer</span>
<span class="safari">Safari</span>
<span class="chrome">Chrome</span>
OS:
<span class="win">Windows</span>
<span class="mac">Mac OS X</span>ffsetHeight+"px");
Detect Win/Mac OS and Basic Browser with CSS Only<br>
Works with Internet Explorer (any), Firefox (any), Newer versions of Safari and Chrome<br>
(Chrome cannot detect OS at this time)<br>
We think you are using...<br>
Browser:
<span class="firefox">Firefox</span>
<span class="msie">Internet Explorer</span>
<span class="safari">Safari</span>
<span class="chrome">Chrome</span>
OS:
<span class="win">Windows</span>
<span class="mac">Mac OS X</span>

css:

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
#/* Hide all possibilities in advance */
.firefox, .msie, .safari, .chrome, .win, .mac { display:none; }

# ie浏览器:
@media screen and (-ms-high-contrast: none) {
.msie, .win { display:block; }
}

#/* Detect Internet Explorer 9 or Greater */
@media screen and (min-width:0\0) and (min-resolution: +72dpi) { .msie, .win { display:block; } }

#/* Detect Internet Explorer 8 or Lower and veru old versions of Firefox */
@media \0screen\,screen\9 { .msie, .win { display:block; } }

#/* Detect any version of Firefox */
_:-moz-tree-row(hover), .firefox { display:block; }

#/* Rule out any straggling Internet Explorer References */
_:-moz-tree-row(hover), .msie, .win { display:none; }

#/* Detect Windows Firefox 4 or newer */
@media screen and (-moz-windows-theme) { .win, .firefox { display:block; } }

#/* Detect Windows Firefox 25 or newer */
@media screen and (-moz-os-version) { .win, .firefox { display:block; } }

#/* Detect Mac Firefox 25 or newer */
@supports (-moz-osx-font-smoothing:auto) { .mac, .firefox { display:block; } }

#/* Detect Chrome 22+ (and Safari 6.1+) */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm), screen and(-webkit-min-device-pixel-ratio:0) {
.chrome { display:block; }
}

#/* Detect Chrome 28+ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @supports (background-attachment:local) {
.chrome { display:block; }
}

#/* Detect Mac Safari 6.1 or newer, hide any straggling Chrome references */
@media screen and (-webkit-max-device-pixel-ratio:1) and (min-color-index:0) {
.mac, .safari {(; display:block; );}
.chrome {(; display:none; );}
}

#/* For PowerPC People who have Internet Explorer for Mac... */
/*\*//*/ .mac, .msie { display:block; } /**/
/*\*//*/ .win { display:none; } /**/