IE FF CHROME hack
由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。 CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对 IE浏览器。 类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等 选择器Hack:比如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。等等 HTML头部引用(if IE)Hack:针对所有IE:<!--[if IE]><!--您的代码--><![endif]-->,针对IE6及以下版本:<!--[if lt IE 7]><!--您的代码--><![endif]-->,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。 书写顺序,一般是将识别能力强的浏览器的CSS写在前面。下面如何写里面说得更详细些。
编辑本段如何写CSS Hack
比如要分辨IE6和firefox两种浏览器,可以这样写: <style> div{ background:green; /* for firefox */ *background:red; /* for IE6 */ (both IE6 && IE7) } </style> 我在IE6中看到是红色的,在firefox中看到是绿色的。 解释一下: 上面的css在firefox中,它是认识不了后面的那个带星号的东东是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。 在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。 CSS hack:区分IE6,IE7,firefox 区别不同浏览器,CSS hack写法: 区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; 区别FF,IE7,IE6: background:orange;*background:green;_background:blue; background:orange;*background:green !important;*background:blue; 注:IE都能识别*;标准浏览器(如FF)不能识别*; IE6能识别*,某些情况下不能识别 !important, ----------------------------------------------------------------------------------------------- IE6支持重定义中的!important,例如: .yuanxin {color:#e00!important;} .yuanxin {color:#000;} 你将会发现定义了样式class="yuanxin"时,在IE下, 字体显示为红色(#e00)。 但不支持同一定义中的!important。例如: .yuanxin {color:#e00!important;color:#000} 此时在IE6下不支持,你将会发现定义了样式class="yuanxin"时,字体显示为黑色(#000)。 不包括如下这种形式的同一定义中的!important。 #pageOver{height:expression(document.documentElement.offsetHeight)!important; height:100%;}此种形式的定义,IE6中是可以解释到important的。 ----------------------------------------------------------------------------------------------- IE6 IE7能识别*,也能识别!important; FF不能识别*,但能识别!important; IE6 IE7 FF * √ √ × !important √ √ √ 浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6 以: " #demo {width:100px;} "为例; #demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/ * html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */ *+html #demo {width:130px;} /*会被IE7执行*/ --------------- 所以最后,#demo的宽度在三个浏览器的解释为: FIREFOX:100px; ie6:120px; ie7:130px; IE8 最新css hack: "\9" 例:"border:1px \9;".这里的"\9"可以区别所有IE和FireFox. "\0" IE8识别,IE6、IE7不能. "*" IE6、IE7可以识别.IE8、FireFox不能. "_" IE6可以识别"_",IE7、IE8、FireFox不能.
IE6 hack
_background-color:#CDCDCD; /* ie 6*/
IE7 hack
*background-color:#dddd00; /* ie 7*/
IE8 hack
background-color:red \0; /* ie 8/9*/
IE9 hack
火狐,遨游,及其它高级浏览器通用
background-color:red!important; 注意写hack的顺序,其中: background-color:red\0;IE8和IE9都支持;background-color:blue\9\0; 仅IE9支持; 另外,background-color:eeeeee\9;的HACK支持IE6-IE8,但是IE8不能识别“*”和“_”的CSS HACK。 可综合上述规律灵活应用。
IE9 和 IE8 以及其他版本的区别说明
background-color:blue; 各个浏览器都认识,这里给firefox用; background-color:red\9;\9所有的ie浏览器可识别; background-color:yellow\0; \0 是留给ie8的,最新版opera也认识,后面自有hack写了给opera认的,所以,\0我们就认为是给ie8留的; +background-color:pink; + ie7定了; _background-color:orange; _专门留给神奇的ie6; :root #test { background-color:purple\9; } :root是给ie9的,网上流传了个版本是 :root #test { background- color:purple\0;},这个,新版opera也认识,所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;} @media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识。。。 @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。
IE FF CHROME hack相关推荐
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载...
js添加事件.移除事件.阻止冒泡.阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 01 var addEvent = ...
- ie678,FF,chrome的css兼容性
附一篇:http://blog.csdn.net/goodshot/article/details/44339549 css的兼容性一般都是前端初学者面临的一个头疼的问题,难免写出来的css在各个浏览 ...
- 复制链接到safari浏览器打开_JS实现复制到剪贴板(兼容FF/Chrome/Safari所有浏览器)...
现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...
- python selenium 测试浏览器(IE,FF,Chrome)
browser_engine.py # coding=utf-8 from selenium import webdriverclass BrowserEngine(object):"&qu ...
- [JS+CSS] - 新浪微博滚动特效[兼容FF,Chrome和IE6,7,8]
来源:网络 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...
- CSS的解决IE5/IE5.5/IE6/FF/IE7的兼容性问题(css hack)
之前找了几个不同版本的可独立运行的IE浏览器,正好拿来试试页面的兼容性问题.不试不知道,在IE6和FF中没问题的页面在IE5和IE5.5中乱成一团,一直听说IE5是WEB标准制作的一个"钉子 ...
- 兼容ffIE678 hack(IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例)
兼容ffIE678 hack(IE6.IE7.IE8.Firefox兼容性CSS HACK代码+示例) 1.区别IE和非IE浏览器CSS HACK代码 #divcss5{ background:blu ...
- CSS Hack汇总(转载)
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助. 现在浏览器的 ...
- ie5/ie5.5/ie6/ff兼容性
解决IE5/IE5.5/IE6/FF的兼容性问题--CSS 之前找了几个不同版本的可独立运行的IE浏览器,正好拿来试试页面的兼容性问题.不试不知道,在IE6和FF中没问题的页面在IE5和IE5.5中乱 ...
最新文章
- ipcs, ipcrm
- question regarding UI configuration type
- [数据结构]链表中销毁和清空的区别
- java重新_Java程序重新配置教程
- OpenJTAG与JLink的区别比较
- 灾难,让我们靠的更近!
- Netty工作笔记0054---EventLoop组件
- 军营中重重打击之后,我变了一个人(中)--我成为程序员所经历的(四)
- 观察者模式 - Observer
- 安装ros-melodic遇到的各种问题及解决方法
- 数据清洗与数据预处理浅析
- AgentWeb 更加简洁优秀的webview
- Android 自定义锁屏_让你的 Android 用上炫酷航拍壁纸
- R学习之统计算法与R优化包(矩估计法也即Newton) --(R语言编程)-----数模
- Allegro PCB Design GXL (legacy) - 导出 PCB 中元件的坐标文件
- 大学android移动开发笔记,基于Android的移动模拟练习系统的设计与实现
- 数据仓库之缓慢变化维度处理
- USB转ESP8266 01 WIFI串口模块 电脑无线通信单片机转接板烧录固件 AirKiss SmartConfig 智能配网
- 计算机微机原理与接口技术课程设计课题,微机原理与接口技术课程设计报告
- 计算机语言输入不见了,win7右下角的输入法图标不见_右下角的输入法没了_右下角的语言栏不见了的解决方法...