CSS Hacks 总结

CSS hack由于不同的浏览器,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,我们就需要针对不同的浏览器去写不同的CSS,让他能在不同的浏览器中也能得到我们想要的页面效果。

CSS hack 表现形式:

1.CSS类内部Hack。

2.选择器Hack。

3.HTML头部引用(if IE)Hack。

 

HTML头部引用写法:

<!--[if lt IE 7]>      <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

<!--[if IE 7]>         <html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->

<!--[if IE 8]>         <html class="no-js lt-ie10 lt-ie9"> <![endif]-->

<!--[if IE 9]>         <html class="no-js lt-ie10"> <![endif]-->

<!--[if gt IE 9]><!--> 

<html class="no-js"> <!--<![endif]-->

这段代码包含了一些条件注释,它会根据浏览器的不同选择性地给<html>标记添加(或不添加)一个包含浏览器版本信息的class属性。

透过条件式类别名称的技巧,你的 CSS 内容就可以写成以下这样,也可以有效避免使用 CSS Hacks:

.lt-ie10 .arrow{

    filter: FlipV;

  }

 

CSS内部HACK

1.*:IE7及以下都能识别* ; 标准浏览器(如FF)不能识别*;

2.!Important:IE7和标准浏览器能识别*,IE6不能识别!important;

3.*+html:IE7 认 !important, 也认 *+html,且只有IE7认*+html。

优先度: (*+html + !important) > !important > +html;

4.下划线_;下划线的只有IE6认识 也只有IE6会处理这部分样式.

5.反斜杠:color:#0000FF\9; /*ie都识别*/

 

选择器HACK

1.IE6和早期的版本不支持“子选择器”(>)

2.IE7增加了对子选择器的支持,但人当一个空的注释紧跟在子选择器的后面时无效。

子选择器加注释(>/**/);

html >/**/ body p { color: blue; } 

IE7以上版本及非IE浏览器颜色为blueIE7为黑色。

 

盒模型HACK

IE9以及以下,padding值是加到width内部,盒子整体宽度不变。

解决方法:html头部加上<!doctype html>,表示统一采取W3C盒模型。

 

posted @ 2014-07-30 15:24  dyy1989  阅读(253)  评论(1编辑  收藏  举报