IE6/7/8、Firefox、Safari、Chrome、Opera浏览器CSS汇总:

                                     IE6/7/8、Firefox、Safari、Chrome、Opera浏览器CSS汇总

内容摘要： 目前网上有很多关于IE6/7/8、Firefox、Safari、Chrome、Opera等浏览器CSS Hack（样式补丁）的文章，但我觉得太过繁杂，要不给出一张看也看不懂的CSS Hack归纳表，要不就是给出一大堆代码说明问题，不便于学习与使用。我根据自己的使用情况来简单地归纳了一下，希望这些对大家有用。
　　目前网上有很多关于IE6/7/8、Firefox、Safari、Chrome、Opera等浏览器CSS Hack（样式补丁）的文章，但我觉得太过繁杂，要不给出一张看也看不懂的CSS Hack归纳表，要不就是给出一大堆代码说明问题，不便于学习与使用。我根据自己的使用情况来简单地归纳了一下，希望这些对大家有用。

　　CSS Hack1：把IE6/7/8与其它浏览器区别开来
　　在css代码属性值后面加上“\9”(不包括双引号)，如：
　　#div {
　　margin-top: 15px\9;
　　}
　　*这样“margin-top: 15px”属性只有IE6/7/8浏览器能读出来。

　　CSS Hack2：针对IE6和IE7
　　在css代码的属性名称前加“*”(不包括双引号)，如：
　　#div {
　　*margin-left: 15px;
　　}
　　*这样“margin-left: 15px”属性只有IE6/7浏览器能读出来。

　　CSS Hack3：单独针对IE6
　　在css代码的属性名称前加“_”(不包括双引号)，如：
　　#div {
　　_width: 15px;
　　}
　　*这样“width: 15px”属性只有IE6浏览器能读出来。

　　CSS Hack4：单独针对IE7
　　在css代码的属性值后面加“ !important”(不包括双引号)，如：
　　#div {
　　height: 18px !important;
　　}
　　*这样“height: 18px”属性只有IE7浏览器能读出来。

　　CSS Hack5：单独针对IE8
　　在css代码的属性值后面加“\0”(是斜杠加零，不包括双引号)，如：
　　#div {
　　background: green\0;
　　}
　　*这样“background: green”属性只有IE8浏览器能读出来。

　　CSS Hack6：单独针对Firefox
　　把针对Firefox的CSS代码写在下面CSS函数的大括号之间
　　@-moz-document url-prefix(){ /*CSS代码*/ }，如：
　　@-moz-document url-prefix(){
　　#main {background: red; }
　　}
　　*这样id号为“main”的Html元素只有在Firefox中才会显示出“background: red”的效果。

　　CSS Hack7：单独针对Opera
　　把针对Opera的CSS代码写在下面CSS函数的大括号之间
　　@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){/*CSS代码*/ }，如：
　　@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
　　#content {background: url() no-repeat center top;}
　　}
　　*这样id号为“content”的Html元素只有在Opera中才会显示出“background: url() no-repeat center top”的效果。

　　CSS Hack8：针对Safari和Google Chrome
　　把针对Safari和Google Chrome的CSS代码写在下面CSS函数的大括号之间
　　@media screen and (-webkit-min-device-pixel-ratio:0){/*CSS代码*/ }，如：
　　@media screen and (-webkit-min-device-pixel-ratio:0){
　　#picture {background: url() no-repeat center top;}
　　}
　　*这样id号为“picture”的Html元素只有在Safari和Google Chrome中才会显示出“background: url() no-repeat center top”的效果。但是如果Safari和Google Chrome内核版本不一样的话，CSS显示效果也会有所偏差。


    相关链接：