今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐、Chrome、Opera浏览器的Hack,并把这些CSS Hack综合的一起,写了一个小的浏览器测试器。如图所示:
下面就来看一下代码吧:
html部分:
12345678910111213 | < 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部分,此部分就只贴Hack部分的代码吧,布局的就不贴了:
12345678910111213141516171819202122232425262728293031323334353637383940414243 | .content .test {
width : 200px ;
height : 200px ;
background : #f60 ; /*all*/
background : #06f9 ; /*IE*/
* background : #666 ; /*IE6,7*/
_background : #ccc ; /*IE6*/ }
/* webkit and opera */
|