CSS hack技术
首先我们要了解一个概念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技术的更多相关文章
- Web前端技术研究:Css hack技术---令人沮丧的技术
我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...
- 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 当前网络时代,各种各样的网页向我们展示着丰富多彩 ...
- CSS Hack技术(一)
这世间坑爹的东西不少,浏览器可以算做一件,尤其的IE浏览器.关于浏览器的吐槽已经有不少了,我也就不在这添油加醋了.不过吐槽终究只是泄一时之愤,解决问题才是关键,今天我们就来讲一讲浏览器(样式)兼容的技 ...
- CSS Hack技术介绍及常用的Hack技巧集锦
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
- CSS Hack技术介绍及常用的Hack技巧
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
- 常用的CSS Hack技术集锦
来源:http://www.ido321.com/938.html 一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Ha ...
- 经常使用的CSS Hack技术集锦
来源:http://www.ido321.com/938.html 一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致同样的CSS输出的页面效果不同,这就须要CSS Ha ...
- 用CSS hack技术解决浏览器兼容性问题
什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CSS ...
- 简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera
一.跨浏览器的网页设计一直是让人很头疼的问题,这不只是因为浏览器的版本众多,还有一个重要的原因是相同浏览器的不同时期的版本也会有差异,甚至是在不同操作同台上还会有不同.因此使CSS hack技术进行浏 ...
随机推荐
- [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 ...
- ExtJs4 笔记(14) layout 布局
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- 第5章 绘图基础_5.1-5.4 GDI绘图
5.1 GDI的原理和结构 (1)提供一种特殊机制彻底隔离应用程序与不同输出设备(eg.显示器或打印机),以便支持 与设备无关的图形. 光栅设备(如显示器.激光打印机):图像是由点构成的矩阵 图形输出 ...
- Java 序列化Serializable
a)当一个父类实现序列化,子类自动实现序列化,不需要显式实现Serializable接口: b)当一个对象的实例变量引用其他对象,序列化该对象时也把引用对象进行序列化: c) static,trans ...
- java 22 - 13 多线程之解决线程安全问题的实现方式2
上一章说了,解决线程安全问题的实现方式1是使用同步代码块 同时也知道了,同步代码块的锁对象是任意对象:(Object obj ; Demo d;)这些都行 那么,现在来说解决线程安全问题的实现方式2 ...
- Android中使用Gson解析JSON数据的两种方法
Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率;本文将介绍两种方法解析JSON数据,需要的朋友可以参考下 Json是一种类似于XML的通用数据交换格式,具有比XML更高的 ...
- android studio 中 .9.png的制作
折腾好久,最后在一个群里面咨询一个朋友才弄好的,用的是1.2.2版,感觉对.9的支持不太好, 1,用一张干净的png图片放在mipmap里面. 2,点击图片右键最后一项,create 9-patch ...
- django复习笔记3:实战
1.初始化 2.配置后台,增加测试数据 3.测试urls/views/templates 4.增加静态资源 5.修改样式 6.模版继承 7.增加博文主页 8.增加表单 9.完善新增页面和编辑页面的表单 ...
- EEG: electrode positions & Broadmann atlas
Source: http://www.brainm.com/software/pubs/dg/BA_10-20_ROI_Talairach/nearesteeg.htm Area LEFT RIG ...
- [java]java语言初探 servlet+jsp架构
<<head first java>> https://www.tutorialspoint.com/jsp/jsp_architecture.htm JSP Processi ...