目前IE内核浏览器仍然是国内主流浏览器,占据着PC浏览器的大部分市场份额,版本从IE6到IE10,所有前段工作者都必须面对和解决多个IE浏览器对代码的兼容性问题。在很多情况下,我们需要专门针对IE写css样式,即针对IE的css hack,下面将详细介绍这些内容:
1、常见的特殊符号的应用:
IE6:
_selector{property:value;}
selector{property:value;property:value !important;} //IE6 不支持同一选择符中的 !important
IE7:
+selector{property:value;}
IE8:
selector{property:value\0;}
IE6 & IE7:
*selector{property:value;}
IE6 & IE7 & IE8:
selector{property:value\9;}
总结起来,如下:
其中,S表示Standards Mode即标准模式,Q表示Quirks Mode,即兼容模式。
(了解更多Quirks模式、Strict(Standars)模式?)
hack
示例
IE6(S)
IE6(Q)
IE7(S)
IE7(Q)
IE8(S)
IE8(Q)
*
*color
Yes
Yes
Yes
Yes
No
Yes
+
+color
Yes
Yes
Yes
Yes
No
Yes
-
-color
Yes
Yes
No
No
No
No
_
_color
Yes
Yes
No
Yes
No
Yes
#
#color
Yes
Yes
Yes
Yes
No
Yes
\0
color\0
No
No
No
No
Yes
No
\9
color\9
Yes
Yes
Yes
Yes
Yes
Yes
!important
color:blue !important;
color:green;
No
No
Yes
No
Yes
No
2、条件注释语句(<!--[if IE]> <![endif]-->)
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
lt 表示less than 当前条件版本以下的版本,不包含当前版本。
gte 表示greeter than or equal 当前版本以上版本,并包含当前版本。
lte 表示less than or equal 当前版本以下版本,并包含当前版本。
3、meta声明
由于IE8 可能会将页面按照 IE7 模式进行渲染,针对 多版本IE的现状,通常会采用设置 X-UA-Compatible HTTP 头的方式将页面在IE中采用统一的渲染模式。
<meta http-equiv="X-UA-Compatible" content="IE=7"> //标准 IE7 模式
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> //兼容 IE7 模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge">//标准 IE 模式
4、其他(/*\**/注释法)
网上也流传着这样一种ie hack方法
.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/
转自请注明文章转自五月兰博客:http://www.wuyuelan.com/1322

转载于:https://blog.51cto.com/wuyuelan/1049514

针对IE6\7\8\9\10浏览器的CSS hack大全详解相关推荐

  1. 解决不同浏览器对css支持问题详解

    解决不同浏览器对css支持问题 多使用JQuery,它有很好的兼容性. 在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF ...

  2. css hack *html,css hack 大全 各个浏览器的css

    各个浏览器的css hack区别属性: IE6: _zoom:1; IE6/7: *zoom:1; IE6/7/8/9 :\9 各个浏览器的css hack区别规则 IE6: *html{} IE7: ...

  3. 浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer

    浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer CSS Hack 是在标准 CSS 没办法兼容各浏览器显示效果时才会用上的 ...

  4. 区别不同浏览器,CSS hack写法

    区别不同浏览器,CSS hack写法: 区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !impor ...

  5. 绝地求生服务器维护啥意思,2019绝地求生7月10日正式服维护内容详解介绍

    2019绝地求生7月10日正式服维护内容详解介绍 2019-07-10 09:13:52来源:pubg官方微博编辑:君辞-v-评论(0) 2019绝地求生7月10日正式服维护更新了什么内容?游戏在今天 ...

  6. 浏览器实现抓包过程详解

    浏览器实现抓包过程详解 几乎所有浏览器都提供了抓取数据包的功能,因为浏览器为抓包提供了一个专门的操作界面,因此这种抓包方式也被称为"控制台抓包".本节以 Chrome 浏览器为例进 ...

  7. 10年后端开发程序员详解数据库缓存方案到底有多少名堂。丨Linux服务器开发丨后端开发丨中间件丨web服务器丨数据库缓存

    数据库缓存方案到底有多少花样,一节课带你缕清 1. 读写分离方案 2. 若干个缓存解决方案 3. 缓存故障如何解决 视频讲解如下,点击观看: 10年后端开发程序员详解数据库缓存方案到底有多少名堂.丨L ...

  8. 基于HTTP浏览器缓存机制全面解析看Table表格的css样式代码详解

    文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 漂亮的table表格样式 ...

  9. hack (浏览器兼容css hack)

    1.hack的原理 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内 ...

最新文章

  1. Statement接口实现查询数据、添加数据
  2. 科大星云诗社动态20210225
  3. Boost:分配服务的实例
  4. Windows平台下安装Hadoop
  5. SAP Spartacus HTML Tags 实现介绍
  6. 15 - java 继承
  7. CSS基础必备知识点04
  8. 下来安成功 打开一直白屏_苹果手机白屏怎么解决啊,苹果手机白屏了怎么修复...
  9. jquery中的html代码、文本以及值
  10. 风变Python3---if条件相关的学习
  11. 哈工大SCIR Lab | EMNLP 2019 结合单词级别意图识别的stack-propagation框架进行口语理解...
  12. 【目标跟踪】基于matlab Kalman滤波目标跟踪【含Matlab源码 388期】
  13. 诛仙服务器技能修改,诛仙私服422服务端个人修改版带补丁+虚拟机+教程+工具[模板源码]...
  14. 毕向东Mysql教程_传智播客_毕姥爷_2012年毕向东Java基础教程_毕向东老师
  15. 360网站域名拦截检测 非法网址检测系统原理
  16. C语言:求不确定科目数的加权平均分
  17. Urgent VS Relex
  18. vue 项目中 自动生成 二维码
  19. ORACLE几个关于工作日数的函数(原创)
  20. linux系统文件系统格式转换--不丢文件

热门文章

  1. Xcode调用栈时小图标代表什么意思
  2. linux mysql忘记root密码
  3. MySQL数据备份语句
  4. ThinkPHP验证码类
  5. mysql远程连接授权
  6. JAVA学习绘图颜色及其笔画属性设置字体显示文字
  7. 为什么由Python转go
  8. 路由及路由器工作原理深入解析3:路由与port
  9. hihocoder 1490 Tree Restoration
  10. HTML 5 Web Workers