主流浏览器之专属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（_）：

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

 

ie6 & ie7（*）：

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

 

ie7（*+）：

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

 

ie8(\0)：

1 /*ie 8*/
2 width:100px\9;
3 /*
4 给单独 ie8 的解析值，在属性值后加“\0”
5 */

 

ie9（\9\0）：

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

 

firefox：

 1 /* 低版本火狐1,2 */
 2 body:empty #firefox12/*选择器前加 body:empty*/
 3 {width: 100px;}
 4  
 5 /* 高版本火狐*/
 6 @-moz-document url-prefix()/* 选择器前加 @-moz-document url-prefix() */
 7 {
 8  #firefox
 9  {
10   width: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 验证，所以还得自己权衡是否有必要去使用。

posted on 2012-10-16 08:53  Cosimo  阅读(202)  评论(0)  编辑  收藏  举报

导航