首页 > 代码库 > Css Hack的定义以及用法

Css Hack的定义以及用法

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如下

hack

示例

IE6

IE7

IE8

*

*color

Yes

Yes

No

+

+color

Yes

Yes

No

-

-color

Yes

No

No

_

_color

Yes

No

No

#

#color

Yes

Yes

No

\0

color\0

No

No

Yes

\9

color\9

Yes

Yes

Yes

!important

color:blue !important;
color:green;

No

Yes

Yes

 

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的定义以及用法