一、什么是CSS Hack?

不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack。

CSS Hack常见的有三种形式:CSS属性Hack、CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器。

1、属性级Hack:比如IE6能识别下划线”_”和星号” * “,IE7能识别星号” * “,但不能识别下划线”_”,而firefox两个都不能认识。

2、选择符级Hack:比如IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。

3、IE条件注释Hack:IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE:<!–[if IE]><!–您的代码–><![endif]–>,针对IE6及以下版本:<!–[if lt IE 7]><!–您的代码–><![endif]–>,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都 会生效。

PS:条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

二、常用的CSS Hack

代码如下:

/* CSS属性级Hack */
color:red; /* 所有浏览器可识别*/
_color:red; /* 仅IE6 识别 */
*color:red; /* IE6、IE7 识别 */
+color:red; /* IE6、IE7 识别 */
*+color:red; /* IE6、IE7 识别 */
[color:red; /* IE6、IE7 识别 */
color:red9; /* IE6、IE7、IE8、IE9 识别 */
color:red; /* IE8、IE9 识别*/
color:red9; /* 仅IE9识别 */
color:red ; /* 仅IE9识别 */
color:red!important; /* IE6 不识别!important*/
-------------------------------------------------------------
/* CSS选择符级Hack */
*html #demo { color:red;} /* 仅IE6 识别 */
*+html #demo { color:red;} /* 仅IE7 识别 */
body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
:root #demo { color:red9; } : /* 仅IE9识别 */
--------------------------------------------------------------
/* IE条件注释Hack */
<!--[if IE]>此处内容只有IE可见<![endif]--> 
<!--[if IE 6]>此处内容只有IE6.0可见<![endif]--> 
<!--[if IE 7]>此处内容只有IE7.0可见<![endif]--> 
<!--[if !IE 7]>此处内容只有IE7不能识别,其他版本都能识别,当然要在IE5以上。<![endif]-->
<!--[if gt IE 6]> IE6以上版本可识别,IE6无法识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if lt IE 7]> 低于IE7的版本才能识别,IE7无法识别。 <![endif]-->
<!--[if lte IE 7]> IE7以及IE7以下版本可识别<![endif]-->
<!--[if !IE]>此处内容只有非IE可见<![endif]-->

三、IE6对!important的支持

!important一般用来做区分IE6和Firefox等浏览器的基本Hack手法。因为IE6不支持!important,而Firefox能读懂!important,其改变了样式的优先级。其实IE6在某些情况下,也能认识!important。

例如:

代码如下:

<style type="text/css">
.demo{
color:red !important;
color:green;
}
</style>
<div class="demo">www.jb51.net</div>

上面代码在FF下字体为红色、IE6下字体为绿色。说明IE6忽视!important的存在。

再来看看:

代码如下:

<style type="text/css"> 
.demo{ color:red !important; } 
.demo { color:green; } 
</style> 
<div class="demo">www.jb51.net</div>

如果IE6不认!important的话,上面代码.demo的内容应该显示为绿色,可偏偏不是,.demo的内容显示为红色,说明IE6是认得!important的。

两种情况的区别就在于:当在一个选择器中,利用!important改变样式优先级的时候,IE6下是无效的,后面的样式覆盖了前面的,!important被彻底无视了,利用!import

四、IE6下的多选择符

多类选择符的写法。例如:

代码如下:

#my.c1.c2 { color:red;}
.c1.c2 { color:red;}

以上写法在IE7+/FF/Opera/Safari 等浏览器都支持。

但在IE6中,后一个类名会覆盖前一个类名,也就是说,上例被IE6理解为:

代码如下:

#my.c2 { color:red;}
.c2 { color:red;}

同理:

 

代码如下:


#my.c1.c2.c3 { color:red;}

IE6理解为 #my.c3 {color:red;}

 

代码如下:


.c1.c2.c3 { color:red;}

IE6理解为 .c3 { color:red; }

所以开发中用多类来组合实现css效果的时候,注意IE6的这个问题。最好的方法就是,不要用类组合的形式。

CSS Hack技术介绍及常用的Hack技巧的更多相关文章

  1. CSS Hack技术介绍及常用的Hack技巧集锦

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  2. Web前端技术研究:Css hack技术---令人沮丧的技术

    我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...

  3. CSS Hack技术详解,支持IE 6-11、Chrome、FireFox、Safari、Opera 6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera

    转自: http://www.365mini.com/page/css-hack-ie-chrome-firefox-safari-opera.htm 当前网络时代,各种各样的网页向我们展示着丰富多彩 ...

  4. Hack技术

    Hack技术 1.IE条件注释法,微软官方推荐的hack方式. 只在IE下生效 <!--[if IE]> <link rel="stylesheet" href= ...

  5. HTML兼容问题——HACK技术

    有话先说:本文的目的主要是向大家描述一下我们在遇见IE8版本一下以及Firefox兼容的问题. 针对不同的浏览器写不同的CSS的过程,这就叫CSS hack,也叫写CSS hack,相信您会对一些比较 ...

  6. openwrt-智能路由器hack技术(2)---"网路信息监控和窃取"

    openwrt-智能路由器hack技术(2)---"网路信息监控和窃取" 1   导读 PS:之前写的一个文章,现在发现结构内容排版不是太好,导致阅读体验太差,影响传播和SEO,所 ...

  7. openwrt-智能路由器hack技术(1)---"DNS劫持"

    openwrt-智能路由器hack技术(1)---"DNS劫持" 1   导读 PS:之前写的一个文章,现在发现结构内容排版不是太好,导致阅读体验太差,影响传播和SEO,所以现在整 ...

  8. HTML的条件注释和hack技术

    在很多时候,前端的兼容性问题,都很让人头痛!幸运的是,微软从去年声明:从2016年1月12日起,微软将停止为IE8(包括IE8)提供技术支持和安全更新.整个前端圈子都沸腾起来,和今年七月份Adobe宣 ...

  9. HTML的条件注释及hack技术

    在很多时候,前端的兼容性问题,都很让人头痛!幸运的是,微软从去年声明:从2016年1月12日起,微软将停止为IE8(包括IE8)提供技术支持和安全更新.整个前端圈子都沸腾起来,和今年七月份Adobe宣 ...

随机推荐

  1. 说说React

    一个组件,有自己的结构,有自己的逻辑,有自己的样式,会依赖一些资源,会依赖某些其他组件.比如日常写一个组件,比较常规的方式: 通过前端模板引擎定义结构 JS文件中写自己的逻辑 CSS中写组件的样式 通 ...

  2. [转]Using Entity Framework (EF) Code-First Migrations in nopCommerce for Fast Customizations

    本文转自:https://www.pronopcommerce.com/using-entity-framework-ef-code-first-migrations-in-nopcommerce-f ...

  3. 扫描线+堆 codevs 2995 楼房

    2995 楼房  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 地平线(x轴)上有n个矩(lou)形(fan ...

  4. HDU 4578 Transformation --线段树,好题

    题意: 给一个序列,初始全为0,然后有4种操作: 1. 给区间[L,R]所有值+c 2.给区间[L,R]所有值乘c 3.设置区间[L,R]所有值为c 4.查询[L,R]的p次方和(1<=p< ...

  5. ural Cipher Message

    Cipher Message Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Desc ...

  6. QuickFix/J 源代码

    三). 客户化FIX解析 基础知识:以下文章内容描述的前提是已经根据自己的业务规则,生成了符合要求的数据字典,并且使用QuickFix/J自带的 ant 的 jar target生成了客户化的协议解析 ...

  7. Mysql数据库之Binlog日志使用总结

    binlog二进制日志对于mysql数据库的重要性有多大,在此就不多说了.下面根据本人的日常操作经历,并结合网上参考资料,对binlog日志使用做一梳理: 一.binlog日志介绍1)什么是binlo ...

  8. [推荐]两款Flash上传插件(1)–CFUpdate文件批量上传组件

    搞开发的同学都知道,网上可搜到的可用的Flash图片上传的组件少之又少,可定制界面,不需要安装组件,且可免费用于任何商业系统的,更是凤毛麟角,如果你和我一样,迫切需要一款这样的一款组件的话,不妨试试C ...

  9. Meet Github

    Source: http://www.liaoxuefeng.com/ Here only the local part. Install on windows download: https://g ...

  10. .net core API 统一拦截错误

    public override void OnActionExecuted(ActionExecutedContext context) { if (context.Exception != null ...