网上有很多关于ie hack的文章,可能由于文章发布后ie的版本还在升级。所以导致有些hack写法已经不适用了。以下是本人整理的ie6-11的一些hack常用写法。(以下默认文档模式为标准模式)

1.通过条件判断ie版本来引用不同的css

<!--[if IE]>只试用ie浏览器<![endif]-->
<!--[if !IE]>只试用非ie浏览器<![endif]-->
<!--[if IE 6]>只试用ie6浏览器<![endif]-->
<!--[if gt IE 6]>只试用大于ie6浏览器<![endif]-->
<!--[if lt IE 9]>只试用小于ie9浏览器 <![endif]--> 
<!--[if gte IE 8]>只试用大于或等于ie8浏览器<![endif]--> 
<!--[if lte IE 7]>只试用小于或等于ie7浏览器<![endif]-->

以上方式以此类推,可以通过引用不同的外链css或直接使用内嵌样式表 来满足基本要求。

2.直接使用css属性的hack写法。

1)!important  由于ie6不知别!important,其他浏览器都识别,所以可以用于ie6 hack。

div{
max-width:100px;
width:auto !important;
width:100px;
}

2)  下划线 '_'   ie6的有一个专用hack写法。

div{
color:blue;
_color:red;  /*只有在ie6下才会表现为红色*/
}

3) 星号 '*'  ie6,7的公用写法。  

div{
color:blue;
*color:red; /*在ie6,7下都会表现为红色*/
}

ie7没有专用写法,*会同时识别ie6,7,如果只想识别ie7,可以同时配合下划线‘_’使用。  

4) \0   ie8及以上浏览器都会识别\0写法,ie6,7不识别

div{
color:red;
color:#ccc\0;
}

以上写法只有ie8及以上浏览器都会识别,ie6,7不识别,而且会导致ie6,7不识别普通写法(color:red),需要同时使用'*'来适配ie6,7。

5)\9   ie6-10都识别\9,10以上不识别

div{
color:red;
color:blue\9; /*ie 6-10都为blue*/
} 

6)\9\0  ie9,10识别   ie8,11不识别,使用默认    ie6,7不识别,也不使用默认

div{
color:red;
color:blue\9\0;
}

以上写法在ie9,10中会表现会蓝色,在ie8,11下会表现为红色,而在ie6,7下则表现为黑色,需要单独为ie6,7使用 '*' hack。

以上就是总结的ie hack写法,代码和例子均测试过。欢迎大家补充,分享。

最后说一句,如果可以通过其他方式避免ie不同版本表现不一致,尽量不要使用hack写法。

  

css ie hack整理的更多相关文章

  1. css hack整理:区别FF,IE8,IE7,IE6,SF,CH浏览器

    css hack整理:区别FF,IE8,IE7,IE6,SF,CH浏览器 2013年03月24日 ⁄ CSS ⁄ 共 716字 ⁄ 暂无评论         前端开发最要命的事就是处理浏览器的兼容性问 ...

  2. css常用hack

    原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...

  3. 【必备】史上最全的浏览器 CSS & JS Hack 手册(转)

    浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向 ...

  4. css if hack之兼容ie

    1.Css if hack条件语法< !--[if IE]> Only IE <![endif]-->仅所有的WIN系统自带IE可识别< !--[if IE 5.0]&g ...

  5. 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明

    自从安装了IE8.0正式版本!木头 就对基本的几个 CSS HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助! 本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象 ...

  6. CSS小tip整理

    CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB&quo ...

  7. 针对IE的CSS样式hack

    针对IE的CSS样式hack,如下: 例子:background:#000: 1.只针对IE6的hack方式(_):_background:#000: 2.只针对IE7的hack方式(+):+back ...

  8. 关于css的hack问题

    <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> 取值: <keywords> ...

  9. CSS样式命名整理(非原创)

    非原创,具体出自哪里忘了,如果侵害您的利益,请联系我. CSS样式命名整理 页面结构 容器: container/wrap 整体宽度:wrapper 页头:header 内容:content 页面主体 ...

随机推荐

  1. underscorejs-map学习

    2.2 map 2.2.1 语法: _.map(list, iteratee, [context]) 2.2.2 说明: 对集合的每个成员依次进行某种操作,将返回的值依次存入一个新的数组.接收3个参数 ...

  2. 【jquery学习笔记】关于$(window),$("html,body").scroll()的在不同浏览器的不同反应

    已经很几次碰到了这种问题, 例子: $(window).scroll(function(){ var num=$(window).scrollTop();              //之前的写法是$ ...

  3. 面向对象设计模式之Interpreter解释器模式(行为型)

    动机:在软件构建过程中 ,如果某一特定领域的问题比较复杂,类似的模式不断重复出现,如果使用普通的编程方式来实现将面临非常频繁的变化.在这种情况下,将特定领域的问题表达为某种语法规则的句子,然后构建一个 ...

  4. MongoDB-固定集合 capped collection 操作 介绍

    固定集合:capped collection 是性能出色的固定大小的集合,以LRU算法淘汰记录,自助维护集合中的对象的插入顺序,创建时预先制定大小,空间使用完,心对象取代旧的对象,保持最新的数据. 可 ...

  5. JQuery调用iframe父页面元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', ...

  6. ppt画笔标记在哪里|ppt中画笔工具功能怎么用?

    一.ppt中画笔工具功能在哪里? 这个画笔工具其实就相当于我们的一个标记工具,要实现标记功能首先将需要演示的PPT按住F5进入到放映状态,然后在右击ppt上的空白处就会弹出衣蛾对话框,在对话框中选择“ ...

  7. UVa 129 Krypton Factor困难的串 (dfs 递归搜索)

    回溯法,只需要判断当前串的后缀,而不是所有的子串 #include<iostream> #include<cstdio> using namespace std; ]; int ...

  8. MySQL的索引

    MySQL索引 索引:是一种特殊的文件(InnoDB 数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的引用指针.其可以加快数据读操作,但会使数据写操作变慢:应该构建在被用作查询条 ...

  9. iOS开发之WKWebView简单使用

    iOS开发之WKWebView简单使用   iOS开发之 WKWebVeiw使用 想用UIWebVeiw做的,但是突然想起来在iOS8中出了一个新的WKWebView,算是UIWebVeiw的升级版. ...

  10. Configure swagger with spring boot

    If you haven’t starting working with spring boot yet, you will quickly find that it pulls out all th ...