首先我们要了解一个概念CSS hack

不同浏览器,比如IE6、IE7、IE8,Mozilla Firefox等,对CSS的支持及解析结果不同,因此会导致相同的网页生成的页面效果不一样。

这个时候我们就需要针对不同的浏览器去定义不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。

CSS Hack的原理:由于不同的浏览器对CSS的支持及解析结果不同以及CSS中的优先级的关系,我们就可以根据这个来针对不同的浏览器来写不同的CSS。

比如:

IE6能识别下划线"_"和星号" * ",

IE7能识别星号" * ",但不能识别下划线"_",

而firefox两个都不能认识。

例如:比如,通常我们会遇到如下的写法:

.side_col { float:left; display: inline; margin-left: 20px; }

而为了适应IE6是:

.side_col { float: left; margin-left: 20px; }

* .side_col { _display:inline; /*hacked for IE 6*/ }

再比如:

id="bgcolor" 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色

. #bgcolor { background:red !important; /* Firefox 等其他浏览器 */ background:blue; /* IE6 */}*+html #bgcolor { background:green !important; /* IE7 */}IE6 不认 !important, 也不认 *+html. 所以 IE6 只能是 blue. IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的优先度最高. Firefox 和其他浏览器都认 !important. !important 优先, Firefox 可以是 red 和 blue, 但 red 优先度高.

CSS hack技术的更多相关文章

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

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

  2. 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 当前网络时代,各种各样的网页向我们展示着丰富多彩 ...

  3. CSS Hack技术(一)

    这世间坑爹的东西不少,浏览器可以算做一件,尤其的IE浏览器.关于浏览器的吐槽已经有不少了,我也就不在这添油加醋了.不过吐槽终究只是泄一时之愤,解决问题才是关键,今天我们就来讲一讲浏览器(样式)兼容的技 ...

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

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

  5. CSS Hack技术介绍及常用的Hack技巧

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

  6. 常用的CSS Hack技术集锦

    来源:http://www.ido321.com/938.html 一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Ha ...

  7. 经常使用的CSS Hack技术集锦

    来源:http://www.ido321.com/938.html 一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致同样的CSS输出的页面效果不同,这就须要CSS Ha ...

  8. 用CSS hack技术解决浏览器兼容性问题

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

  9. 简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera

    一.跨浏览器的网页设计一直是让人很头疼的问题,这不只是因为浏览器的版本众多,还有一个重要的原因是相同浏览器的不同时期的版本也会有差异,甚至是在不同操作同台上还会有不同.因此使CSS hack技术进行浏 ...

随机推荐

  1. [Notes] Learn Python2.7 From Python Tutorial

    I have planed to learn Python for many times. I have started to learn Python for many times . Howeve ...

  2. ExtJs4 笔记(14) layout 布局

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  3. 第5章 绘图基础_5.1-5.4 GDI绘图

    5.1 GDI的原理和结构 (1)提供一种特殊机制彻底隔离应用程序与不同输出设备(eg.显示器或打印机),以便支持 与设备无关的图形. 光栅设备(如显示器.激光打印机):图像是由点构成的矩阵 图形输出 ...

  4. Java 序列化Serializable

    a)当一个父类实现序列化,子类自动实现序列化,不需要显式实现Serializable接口: b)当一个对象的实例变量引用其他对象,序列化该对象时也把引用对象进行序列化: c) static,trans ...

  5. java 22 - 13 多线程之解决线程安全问题的实现方式2

    上一章说了,解决线程安全问题的实现方式1是使用同步代码块 同时也知道了,同步代码块的锁对象是任意对象:(Object obj ;  Demo d;)这些都行 那么,现在来说解决线程安全问题的实现方式2 ...

  6. Android中使用Gson解析JSON数据的两种方法

    Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率;本文将介绍两种方法解析JSON数据,需要的朋友可以参考下   Json是一种类似于XML的通用数据交换格式,具有比XML更高的 ...

  7. android studio 中 .9.png的制作

    折腾好久,最后在一个群里面咨询一个朋友才弄好的,用的是1.2.2版,感觉对.9的支持不太好, 1,用一张干净的png图片放在mipmap里面. 2,点击图片右键最后一项,create 9-patch ...

  8. django复习笔记3:实战

    1.初始化 2.配置后台,增加测试数据 3.测试urls/views/templates 4.增加静态资源 5.修改样式 6.模版继承 7.增加博文主页 8.增加表单 9.完善新增页面和编辑页面的表单 ...

  9. EEG: electrode positions & Broadmann atlas

    Source: http://www.brainm.com/software/pubs/dg/BA_10-20_ROI_Talairach/nearesteeg.htm   Area LEFT RIG ...

  10. [java]java语言初探 servlet+jsp架构

    <<head first java>> https://www.tutorialspoint.com/jsp/jsp_architecture.htm JSP Processi ...