Today, some of the commonly used CSS hack, including commonly used IE hack and Firefox, Chrome, Opera browser hack, and these CSS hack integrated, wrote a small browser tester. :
Let's take a look at the code below:
HTML section:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<
div class
=
"content"
>
<
div class
=
"test"
></
div
>
<
div class
=
"txt"
>
<
p
>IE6下背景颜色:<
span class
=
"ie6" style
=
"background-color: #ccc;"
>#ccc</
span
></
p
>
<
p
>IE7下背景颜色:<
span class
=
"ie7" style
=
"background-color: #666;"
>#666</
span
></
p
>
<
p
>IE8下背景颜色:<
span class
=
"ie8" style
=
"background-color: #06f;"
>#06f</
span
></
p
>
<
p
>IE9下背景颜色:<
span class
=
"ie9" style
=
"background-color: #f00;"
>#f00</
span
></
p
>
<
p
>IE10下背景颜色:<
span class
=
"ie10" style
=
"background-color: #0ff;"
>#0ff</
span
></
p
>
<
p
>webkit,Safari,Chrome下背景颜色:<
span class
=
"webkit-safari-gg" style
=
"background-color: #ff0;"
>#ff0</
span
></
p
>
<
p
>FireFox下背景颜色:<
span class
=
"firefox" style
=
"background-color: #f0f;"
>#f0f</
span
></
p
>
<
p
>Opera下背景颜色:<
span class
=
"opera" style
=
"background-color: #0f0;"
>#0f0</
span
></
p
>
</
div
> </
div
> |
CSS section, this section is only hack part of the code bar, the layout is not affixed:
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 |
.content .test {
width
:
200px
;
height
:
200px
;
background
:
#f60
;
/*all*/
background
:
#06f9
;
/*IE*/
*
background
:
#666
;
/*IE6,7*/
_background
:
#ccc
;
/*IE6*/ }
/* webkit and opera */ @media
all and (
min-width
:
0
){
.content .test {
background
:
#0f0
;
} }
/* webkit */ @media
screen and (-webkit-min-device-pixel-ratio:
0
) {
.content .test {
background
:
#ff0
;
} }
/*FireFox*/ @-moz-document url-prefix() {
.content .test {
background
:
#f0f
;
} }
/*IE9+*/ @media
all and (
min-width
:
0
) {
.content .test{
background
:
#f009
;
} }
/*IE10+*/ @media
screen and (-ms-high-contrast: active), (-ms-high-contrast:
none
) {
.content .test {
background
:
#0ff
;
} } |
Here is the online demo and source download:
Demo Download