CSS hack:由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。简而言之,浏览器不同于W3C关于CSS标准的解析就是CSS hack。一般谈到CSS hack,最先想到的就是ie6。ie6很头疼,曾经是辉煌,如今是夕阳西下了,被进步理论和思想淘汰是早晚的事情,目前想做的就是尽最大的可能去向下兼容它。这篇博文需要说的是:主流浏览器之专属CSS hack。
下面从ie开始说吧:
ie6(_):
1 /*ie 6*/ 2 _100px; 3 /* 4 给单独 ie6 的解析值,在属性前加下划线“_” 5 */
ie6 & ie7(*):
1 /*ie 6 和ie 7*/ 2 *100px; 3 /* 4 给单独 ie6 和 ie7 的解析值,在属性前加星号“*” 5 */
ie7(*+):
1 /*ie 7*/ 2 *+100px; 3 /* 4 给单独 ie7 的解析值,在属性前加星号和加号“*+” 5 */
ie8(\0):
1 /*ie 8*/ 2 100px\9; 3 /* 4 给单独 ie8 的解析值,在属性值后加“\0” 5 */
ie9(\9\0):
1 /*ie 9*/ 2 100px\9\0; 3 /* 4 给单独ie 9的解析值,在属性值后加“\9\0” 5 */
firefox:
1 /* 低版本火狐1,2 */ 2 body:empty #firefox12/*选择器前加 body:empty*/ 3 { 100px;} 4 5 /* 高版本火狐*/ 6 @-moz-document url-prefix()/* 选择器前加 @-moz-document url-prefix() */ 7 { 8 #firefox 9 { 10 100px; 11 } 12 }
chrome safari:
1 /* Safari */ 2 @media screen and (-webkit-min-device-pixel-ratio:0) 3 /* 选择器前加 @media screen and (-webkit-min-device-pixel-ratio:0) */ 4 {#safari { display: block; }}
opera:
1 /* Opera */ 2 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) 3 /*选择器前加 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)*/ 4 {head~body #opera { display: block; }}
CSS Hack 虽好且方便兼容各浏览器,但是通不过 W3C 验证,所以还得自己权衡是否有必要去使用。