首先我们要了解一个概念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. .Net程序员之Python基础教程学习----字典的使用 [Third Day]

      今天学习了字典的使用, 所谓的字典其实就是键值对数据, 一个字典里面有唯一的Key对应一个value,Key是唯一的,Value不唯一. 在.net添加相同的Key会报错,在Python,若出现相 ...

  2. NOIP2013pj小朋友的数字[DP 最大子段和]

    描述 有 n 个小朋友排成一列.每个小朋友手上都有一个数字,这个数字可正可负.规定每个小朋友的特征值等于排在他前面(包括他本人)的小朋友中连续若干个(最少有一个)小朋友手上的数字之和的最大值.作为这些 ...

  3. Android驱动入门-LED--HAL硬件访问服务层②

    硬件平台: FriendlyARM Tiny4412 Cortex-A9 操作系统: UBUNTU 14.04 LTS 时间:2016-09-21  16:58:56 为了避免访问冲突,则创建了硬件访 ...

  4. splay总结

    以此文纪念人生首次竞赛大选 这里主要讲一讲splay的区间操作,我讲的是指针实现,程序的效率可能比较低,更偏重代码的可读可写性,语言风格不是很优美有效,不喜勿喷 零.初始化结构体 1)这里主要是初始化 ...

  5. jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  6. 在PHP中无法连接Memcached的解决办法

    Memcached 已经正确安装配置, 并且防火墙也已经打开了本机对自己所有端口的访问, telnet localhost 11211也正常, 但是通过PHP访问出现 [Sat May 17 22:0 ...

  7. Java操作符

    几乎所有运算符都只能操作"主类型"(Primitives).例外是"="."= ="和"! =",它们能操作所有对象.除 ...

  8. Alwayson--SYS.dm_hadr_instance_node_map 返回0行

    下面是MSDN关于SYS.dm_hadr_instance_node_map 的解释,我就不在翻译了 For every instance of SQL Server that hosts an av ...

  9. 阿里云Center OS 6.2 Nginx 配置 SSL/TLS HTTPS配置

    1.通过https://www.startssl.com/ 免费SSL证书 STARTSSL 跟VeriSign一样,StartSSL(网址:http://www.startssl.com,公司名:S ...

  10. 代码整洁--使用CodeMaid自动程序排版

    在项目开发的过程中,如果只是验证命名规则.而没有统一程序排版,项目中很容易就会出现类似下列范例的程序代码产出.这样的产出,虽然能够正常地提供项目功能.并且符合微软的命名规则,但是因为程序排版凌乱的问题 ...