针对主流浏览器的CSS-HACK写法及IE常用条件注释
对于前端工作者,最痛苦的事莫过于浏览器兼容性的调试,而这最痛苦的事中,最变态的莫过于微软的三个版本IE6.0/IE7.0/IE8.0. 为了让所写代码在各主流浏览器中正常运行,我们不得不为各种浏览器写对应的样式。本文,青鸟将为你总结CSS针对各浏览器的兼容HACK(以IE6/IE7/IE8 /FF为主),以及IE特有的条件注释使用方法.
一、通用区分方式:
IE6、IE7能识别*,标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important;
IE7能识别*,也能识别 !important;
IE8能识别\0,不能识别*,+,_,* 加!important;
FF不能识别*,但能识别 !important;
例如style=”*width:10px!important; width:20px;”,其在IE7下宽度为10px,在IE6下宽度是20px.
其中还有如下三种写法:
第一种
width:200px\0; /* IE8能识别\0*/
*width:300px!important; /* ,IE7 既能能识别*号,也能识别important */
*width:400px; /* IE6也能识别*号 */
/*Mr.Think提示:请注意书写顺序@MrThink.net*/
第二种
width:200px\0; /* IE8能识别\0*/
*width:300px; /* IE7也能识别*号 */
_width:400px; /* IE6能识别下划线*/
/*Mr.Think提示:请注意书写顺序@MrThink.net*/
第三种
width:200px\0; /* IE8能识别\0*/
+width:300px; /* +只识别IE7 */
_width:400px; /* IE6能识别下划线*/
/*Mr.Think提示:请注意书写顺序@MrThink.net*/
二、不常见的HACK(OP表示Opera,SA表示Safari),其中第3条比较实用
1..color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
2..color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
3..color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
4..color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/
三、各种浏览器独立支持的hack
width:100px\0;/* 支持IE8 */
_width:100px; /* 支持IE6 */
[width:100px; /* 支持IE6,7 */
+width:100px; /* 支持IE6,7 */
*width:100px; /* 支持IE6,7 */
*width:100px!important; /* 支持IE6,7, */
*+width:100px; /* 支持IE6,7, */
*+width:100px!important;/* 支持IE6,7, */
width:100px\9; /* 支持IE6,7,8 */
width:100px!important; /* 支持IE6,7,8,FF */
w\idth:100px; /*IE5.x不支持 IE6、IE7、IE8、FF支持 */
四、IE特有的html条件注释使用规则
1.仅IE可见的写法
2.仅IE6可见的写法
3.仅IE7可见的写法
4.版本区间可显示写法
5.非IE可见的写法(注意:此条不符合WEB标准,但的确实用)
原文出自Mr.Think的个人博客:http://mrthink.net/cssandhtml-hack-mainbrower/
转载于:https://www.cnblogs.com/mrthink/archive/2010/06/28/1766487.html
针对主流浏览器的CSS-HACK写法及IE常用条件注释相关推荐
- 区别不同浏览器,CSS hack写法
区别不同浏览器,CSS hack写法: 区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !impor ...
- html 常见hack,针对主流浏览器的CSS-HACK写法及IE常用条件注释
对于前端工作者,最痛苦的事莫过于浏览器兼容性的调试,而这最痛苦的事中,最变态的莫过于微软的三个版本IE6.0/IE7.0/IE8.0. 为了让所写代码在各主流浏览器中正常运行,我们不得不为各种浏览器写 ...
- css hack支持ie8,仅仅 IE8 有效的 CSS hack 写法
IE8 CSS hack 就是在属性后面加上 \9 或者 \0,代码如下: color:#FFF\0; /* IE8 */ color:#FFF\9; /* 所有IE浏览器(ie6+) */ 上面的 ...
- 针对火狐浏览器的CSS样式,从而不会影响别的浏览器
针对火狐浏览器的CSS Hack: @-moz-document url-prefix() { .selector { attribute: value; }} 针对webkit内核及Opera浏览器 ...
- css ie9 打印 hack,IE9下css hack写法
ie9一出css hack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的css hack,拿出来也分享一下: select { background-color:red\0; ...
- Google Chrome的CSS hack写法
Google自从2010年9月3日推出了浏览器Google Chrome,写前端效果的同志们又得辛苦了,现在就是个浏览器混乱的时代,自从Google混进来之后,就更混乱了. 不过还好Google用的是 ...
- 针对谷歌浏览器Chrome的CSS hack
现在使用谷歌浏览器Google Chrome的用户越来越多,所以在制作网页时也应考虑到Chrome浏览器的兼容性.虽然在原来的CSS hack的原理文章中提到过如何用CSS hack区分Chrome浏 ...
- css ie6,ie7,ie8 兼容性写法,CSS hack写法
margin-bottom:40px; /*ff的属性*/ margin-bottom:140px\9; /* IE6/7/8的属性 */ color:red\0; ...
- 浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer
浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer CSS Hack 是在标准 CSS 没办法兼容各浏览器显示效果时才会用上的 ...
- 浏览器兼容css hack,CSS Hack技术解决多浏览器兼容问题
本文向大家描述一下如何使用CSS Hack技巧解决DIV+CSS布局多浏览器兼容问题,针对不同的浏览器写不同的CSS代码的过程,就叫CSS Hack,相信本文介绍一定会让你有所收获. CSS Hack ...
最新文章
- 【最短路】【spfa】小vijos P1447 Updown
- scanf(%c, ch)和scanf( %c, ch)和scanf(%s, str)的注意事项
- linux内核 sin头文件,Linux内核中中断request_irq详解--中断共享问题解决
- 《Python Cookbook 3rd》笔记(5.4):读写字节数据
- LeetCode——maximal-rectangle
- 【转】file_get_contents(php://input)的使用方法
- 朝九晚五的工作值得留恋吗?
- Linux x86-64 IOMMU详解(五)——Intel IOMMU初始化流程
- 3、一层、二层、交换机原理、Cisco软件及命令
- 国内考勤管理系统做的比较好的几款软件?
- easyui 如何添加事件
- mac更新系统版本后的安装包路径
- 如何设计一个电商平台积分兑换系统?
- emmc、Nand flash、Nor flash之间的区别
- 莱鸟学spss数据分析之第六章---描述性分析
- EXCEL2016打开不显示内容(灰色的)如何解决?
- NAS不够快?那就上SSD享受如火箭般的体验吧!
- OnlyBill 简易记账软件(续)
- go-geecache 总结和收获
- CAD图纸如何从低版本转换成高版本
热门文章
- 使用Easy Duplicate Photo Finder for Mac如何查找重复的图片?
- Mac电脑用CrossOver安装的Windows软件在哪?
- Activity 关于生命周期一些问题的实践验证
- 云锁惊艳亮相2016杭州云栖大会
- const 使用方法具体解释
- Ubuntu下用glade和GTK+开发C语言界面程序(三)——学习make的使用方法
- nginx中配置虚拟主机
- onItemLongClick+onCreateContextMenu实现长按ListItem弹出不同菜单
- 阿里面试官:LongAdder和AtomicLong哪个性能更好?我有点懵~
- 10 个牛逼的一行代码就能搞定的编程技巧,你会用吗?