首先我们要了解一个概念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. FTP上传与下载

    1.连接 先假设一个ftp地址 用户名 密码       FTP Server: 192.168.1.125 User: administrator Password: abc123 2. 打开win ...

  2. 了解 Office 365

    Office 2016刚刚发布,那么Office 2016和Office 365是什么关系呢?通过Office 365与传统Office套件的对比,我们可以更好地理解SaaS的本质.SaaS的商业模式 ...

  3. apache poi导出excel报表

    Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API给Java程式对Microsoft Office格式档案读和写的功能.POI为"P ...

  4. BZOJ1029: [JSOI2007]建筑抢修[模拟 贪心 优先队列]

    1029: [JSOI2007]建筑抢修 Time Limit: 4 Sec  Memory Limit: 162 MBSubmit: 3785  Solved: 1747[Submit][Statu ...

  5. [No000048]程序员的成长过程中,有哪些阶段?

    有人在 Quora 提问,并补充: 有木有朋友能根据你们自身经历,清晰地划分各个阶段?比如:学习第一门编程语言.第一份工作.职业决策.理解 IT 公司的目标,等等. Quincy Larson 的回复 ...

  6. [No00000C]Word快捷键大全 Word2013/2010/2007/2003常用快捷键大全

    Word对于我们办公来说,是不可缺少的办公软件,因为没有它我们可能无法进行许多任务.所以现在的文员和办公室工作的人,最基础的就是会熟悉的使用Office办公软件.在此,为提高大家Word使用水平,特为 ...

  7. JS常用方法函数整理

    1.document.write("");为输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4. ...

  8. browserify使用手册

    简介 这篇文档用以说明如何使用browserify来构建模块化应用 browserify是一个编译工具,通过它可以在浏览器环境下像nodejs一样使用遵循commonjs规范的模块化编程. 你可以使用 ...

  9. k-d tree 学习笔记

    以下是一些奇怪的链接有兴趣的可以看看: https://blog.sengxian.com/algorithms/k-dimensional-tree http://zgjkt.blog.uoj.ac ...

  10. Kubernetes deployed on multiple ubuntu nodes

    This document describes how to deploy kubernetes on multiple ubuntu nodes, including 1 master node a ...