关于css hack的技巧大全
2017-03-01 14:56
316 查看
1.什么是hack技术?
由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。
2.CSS hack技巧大全
实例讲解:
Hack应用情境(一)
适用范围:IE:6.0,IE7.0,IE8.0之间的兼容实例说明:此例中我们使用了渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,此时,我们的IE8已经独立识别。
实例代码:
.bb{ height:32px; background-color:#f1ee18;/*所有识别*/ .background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ } /*一个用于展示的class为bb的div标签*/ < div class ="bb"></ div >
Hack应用情境(二)
适用范围:IE:6.0,IE7.0,IE8.0,Firefox之间的兼容实例说明:大家很容易的可以看出这是情境(一)的加强版,适用于更广泛的环境。其实情境(一)中也已经做到了把火狐与IE游览器区分开来了,现在我们要做的是把火狐从其它游览器中再次识别出来。大家仔细看下代码,大家会发现其实游览器识别是很简单的。火狐如何识别?对了,IE中对伪类支持不广泛,所以伪类是个不错的途径。(.yourClass,x:-moz-any-link, x:default) 。注意,这个区分伪类往往IE7也能识别,所以最好还需要把IE7单独识别出来,且此方法对ff3.6 已无效,firefox的区分可以使用@-moz-document url-prefix(){}
实例代码:
.bb{ height:32px; background-color:#f1ee18;/*所有识别*/ background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ } .bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */ @-moz-document url-prefix(){.bb{background-color:#00ff00;}}/* 仅firefox 识别 */ * +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */ /*一个用于展示的class为bb的div标签*/ < div class ="bb"></ div >
Hack应用情境(三)
适用范围:IE:6.0,IE7.0,IE8.0,Firefox,Safari(Chrome)之间的兼容实例说明:我们现在将再次对我们的CSS进行加强了,使其能识别Safari(Chrome)游览器。这是基于它们的内核webkit来识别的,用法为@media screen and (-webkit-min-device-pixel-ratio:0)
实例代码:
.bb{ height:32px; background-color:#f1ee18;/*所有识别*/ background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ } @media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /*safari(Chrome) 有效 */ .bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */ @-moz-document url-prefix(){.bb{background-color:#00ff00;}}/*仅firefox 识别*/ * +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */ /*一个用于展示的class为bb的div标签*/ < div class ="bb"></ div >
相关文章推荐
- 转载,必须掌握的关于IE6、IE7和FF最简单的CSS hack技巧
- CSS hack技巧大全
- 关于VS2003IDE的使用技巧大全
- CSS hack技巧大全 案例演示
- 关于CSS Hack与float闭合的CSS技巧 清除浮动代码
- CSS hack技巧大全
- CSS hack技巧大全
- 关于VS2003IDE的使用技巧大全 之(二)
- CSS hack技巧大全
- VC Studio 使用技巧大全 2.0版本
- SAS技巧-关于速度改进的小技巧,来源于BOSS技术语录
- Delphi6函数大全之-SysUtils.pas(关于字符串函数)
- VC Studio 使用技巧大全(转载)
- google入门到精通技巧大全
- 关于谈判技巧
- VC Studio 使用技巧大全(转载)
- Delphi6函数大全之SysUtils.pas(关于字符串格式)
- 位操作技巧大全
- 关于DataGrid的知识和技巧
- 关于BLOG 技巧的文章