css hack 综合各种浏览器

篇1

/* Opera */html:first-child #opera{display: block;}
--------------------------------
/* IE 7 */
html > body #ie7{*display: block;}
--------------------------------
/* IE 6 */
body #ie6{_display: block;}
--------------------------------
/* 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; }
--------------------------------------------------------------------------------------
Ie9的CSS HACK
select {
background-color:red\0; /* ie8-ie9  */
--------------------------------
background-color:blue\9\0;/* ie9 */
--------------------------------
*background-color:#fff; /* ie7 */
--------------------------------
_background-color:#000; /* ie6 */
}
注意写hack的顺序，其中background-color:red\0;IE8和IE9都支持background-color:blue\9\0; 仅IE9支持=============================================
主要hack:
.test{
color:#0000FF\9;   /* 所有浏览器IE浏览器(ie6+)支持 ；但是IE8不能识别“*”和“_”的css hack；    
--------------------------------
/* SF,CH支持 */ *color:#FFFF00;           
--------------------------------
/* IE7支持*/color:#FF0000;      
--------------------------------      
/* IE6支持 */}body:nth-of-type(1) .CH{color: #FF0000;/* 这是专门针对Chrome和Safari的CSS hack */}
=============================================
针对IE8正式版的css hack

第一种：”\9″：

1.基本的写法：test { color/*\**/: blue\9 }.header {width:300px;} /* 所有浏览器*/
--------------------------------
.header {width/*\**/:330px\9;} /* 所有浏览器IE浏览器

--------------------------------
*/.header {*width:310px;} /* IE7和IE6能识别,IE8和FF不能识别*/
--------------------------------

.header {_width:290px;} /* IE6能识别，IE7、IE8和FF不能识别*/

--------------------------------

第二种：就是使用IE的条件注释

其他一些css hack的测试：

.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/

----------------------------------------------------------------

.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/

----------------------------------------------------------------

.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/

----------------------------------------------------------------

.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/

----------------------------------------------------------------

其中：OP表示Opera，SA表示Safari；