Css Hack的定义以及用法

标签：自动   区别   规则   距离   width   重定义   min   字体   text   

Css Hack的定义以及用法

1、什么是CSS hack

由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!

2、CSS hack解决的问题

问题①  CSS hack用来解决有些CSS属性在不同浏览器中显示的效果不一样的问题，如块级元素浮动后margin属性在IE6中显示的距离会比其他浏览器中显示的距离宽2倍，也就是说margin-left:20px;在非IE6浏览器中显示的距离是设置的值20px，而在IE6浏览器中实际的显示距离是40px；所以要想margin-left的值在所有浏览器中都显示是20px的宽度，写法应为： display:inline;解决的是IE6双边距的问题

    .kw{ margin-left:20px;

         _margin-left:20px;

      }  

问题②  IE6浏览器不支持最大最小宽高（min/max-height）

解决方法：为IE6单独设置hack，即_height:最小高度值；_width：最小宽度值（对于IE6，当实际宽高超出定义的宽高时，元素会自动调整宽高）。对于最大高度和最大宽度，没有必要设置兼容。

常见的hack如下：

IE6支持重定义中的!important，例如：
　　.yanse {color:red!important;}
　　.yanse {color:#000;}
　　你将会发现定义了样式class="yanse"时，在IE6下，字体显示为红色（red）。 
　　但不支持同一定义中的!important。例如：
　　.yanse {color:red!important;

           color:#000

      }
　　此时在IE6下不支持，你将会发现定义了样式class="yanse"时，字体显示为黑色（#000）。

3、我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

      以颜色为例来为FF、IE8、IE7、IE6编写不用的效果：
.csshack{

 
   color:red;        /*firefox等浏览器 显示为红色*/

    color:blue\9;     /*IE8可识别 覆盖上面规则 显示为蓝色*/

   *color:green!important;

                      /*IE7可识别 覆盖上面规则 显示为绿色*/
     *color:#000;/*_color:#000;*/

                   /*IE6可识别 覆盖上面规则 显示为黑色*/
}
这里的"\9"可以区别所有IE和FireFox.
"*"　IE6、IE7可以识别.IE8、FireFox不能.
"_"　IE6可以识别"_",IE7、IE8、FireFox不能.
IE7、IE8都可识别!important。
如此,就可以完全区分开IE6、IE7、IE8、FireFox了.

    CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。所以上面例子的书写顺序为：火狐浏览器的写法写在最前面，IE6的写法要在最后面用于覆盖，其他浏览器写在中间。

Css Hack的定义以及用法

标签：自动   区别   规则   距离   width   重定义   min   字体   text   

原文地址：http://www.cnblogs.com/qiilee/p/6916614.html