主流浏览器兼容性问题---专属CSS hack

-----欢迎你们指正错误，深表感谢

CSS hack：因为不一样的浏览器，好比Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不同，所以会致使生成的页面效果不同，得不到咱们所须要的页面效果。 这个时候咱们就须要针对不一样的浏览器去写不一样的CSS，让它可以同时兼容不一样的浏览器，能在不一样的浏览器中也能获得咱们想要的页面效果。简而言之，浏览器不一样于W3C关于CSS标准的解析就是CSS hack。

通常谈到CSS hack，最早想到的就是ie6。ie6很头疼，曾经是辉煌，现在是夕阳西下了，被进步理论和思想淘汰是迟早的事情，目前想作的就是尽最大的可能去向下兼容它。这篇博文须要说的是：主流浏览器之专属CSS hack。

下面从ie开始说吧：

ie6（_）：

/*ie 6*/
_width:100px;
/* 给单独ie 6的解析值，在属性前加下划线“_” */

 

ie6 & ie7（*）：

/*ie 6 和ie 7*/
*width:100px; /* 给单独ie6 和 ie 7的解析值，在属性前加星号“*” */

 

ie7（*+）：

/*ie 7*/
*+width:100px; /* 给单独ie 7的解析值，在属性前加星号和加号“*+” */

 

ie8(\0)：

/*ie 8*/
width:100px\0;
/* 给单独ie 8的解析值，在属性值后加“\0” */

 

ie9（\9\0）：

/*ie 9*/
width:100px\9\0;
/* 给单独ie 9的解析值，在属性值后加“\9\0” */

 

全部ie（\9）：

/*ie*/
width:100px\9;
/* 给全部ie的解析值，在属性值后加“\9” */

 

firefox：

/* 低版本火狐1,2 */
body:empty #firefox12/*选择器前加 body:empty*/ {width: 100px;} /* 高版本火狐*/ @-moz-document url-prefix()/* 选择器前加 @-moz-document url-prefix() */ { #firefox { width:100px; } }

 

safari：

/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
/* 选择器前加 @media screen and (-webkit-min-device-pixel-ratio:0) */ {#safari { display: block; }}

 

opera：

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
/*选择器前加 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)*/ {head~body #opera { display: block; }}

 

CSS Hack 虽好且方便兼容各浏览器，可是通不过 W3C 验证，因此还得本身权衡是否有必要去使用。