TIPS:对于完全放弃IE的幸福开发者,以下内容全是废话,建议跳转到 博客园 着页,寻找更优质的文章。

对于前端开发来说IE一直是心里的痛,不管你觉得做的多好的网页,放到它上面总会有一些意想不到的问题发生,所以你不得不针对IE单独做些手脚,你就有必要知道一些IE浏览器下的hack写法。

比较常用的几个hack(目前大多公司都只要求兼容到IE8,稍微变态点的也就是IE7下没大的错位就行了,下面hack足以):

\9 像如:width:6.5em;width:8em\9;在ie7-ie10宽度是8em;

\0 像如:width:6.5em;width:8em\0;在ie8-ie11宽度是8em;

* 像如:width:6.5em;*width:8em ie7以下会宽度是8em

针对IE11还可以通过以下媒体查询的方式来解决IE11下的问题:

@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) {

    div{width:8em;}

}

加上以上代码可以让IE11下div的宽度为8em,为了避免IE低版本下也会认识这一媒体查询,最好在screen前加上only。

在IE浏览器下,特别是IE8以下个人感觉真真没必要去太折腾(win7的最低配置都是ie8了),但是为了更好的体验,可以针对IE8以下浏览器给出一个友善的升级提示也是很不错的,IE下的条件注释语句值得拥有:

//ie7及以下会提示用户去升级浏览器
<!--[if lte IE 7]>
<div class="browser-upgrade">你的浏览器版本过低,请到<a href="http://browsehappy.com" class="browser-upgrade__link">这里</a>更新,以获取最佳体验!</div>
<![endif]-->

条件语句还有更多用途,在使用html5新增标签页面可以针对IE低版本引入htmlshiv让低版本浏览器也能识别html新增标签:

<!--[if lt IE 9]>
<script type="text/javascript" src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->

ie的条件语句常用的有几下几种(所有条件注释语句在非IE浏览器下都是普通的注释,不要用非ie去给非IE的浏览执行操作):

lt :就是Less than的简写,也就是小于的意思。

lte :就是Less than or equal to的简写,也就是小于或等于的意思。

gt :就是Greater than的简写,也就是大于的意思。

gte:就是Greater than or equal to的简写,也就是大于或等于的意思。

!:就是不等于的意思,跟javascript里的不等于判断符相同。

<!--[if IE]>
只有IE才支持
<![endif]-->
<!--[if !IE 7]>
IE7不支持
<![endif]-->
<!--[if lt IE 8]>
IE8以下浏览器才支持
<![endif]-->
<!--[if lte IE 8]>
IE8及以下浏览器才支持
<![endif]-->
<!--[if gt IE 8]>
IE8以上浏览器才支持
<![endif]-->
<!--[if gte IE 8]>
IE8及以上浏览器才支持
<![endif]-->

好好运用上面的方法解决你项目中的IE别样BUG吧。

关于IE的一些hack的更多相关文章

  1. css常用hack

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

  2. CSS3_01之选择器、Hack

    1.兄弟选择器:①相邻兄弟选择器:元素的后一个兄弟元素,选择器1+选择器2:②通用兄弟选择器:元素后的所有兄弟元素,选择器1~选择器2: 2.属性选择器:attr表示属性名称,elem表示元素名:①[ ...

  3. CSS Hack技术介绍及常用的Hack技巧集锦

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  4. Medial Queries的另一用法——实现IE hack

    众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的.比如说使用"\0","\"和"\9"来 ...

  5. CSS Hack

    CSS HACK,网上有很多,主要是IE版本不同造成的,尽量不要用CSS HACK,实在调不过去可以用一用,相信以后随着IE低版本的淘汰,CSS HACK也将不在使用. 类内部HACK IE6识别 - ...

  6. hack

    1.Firefox @-moz-document url-prefix() { .selector { property: value; } }上面是仅仅被Firefox浏览器识别的写法,具体如: @ ...

  7. 浅谈CSS hack(浏览器兼容)

    今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...

  8. css3复杂选择器+内容生成+Css Hack

    1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过 ...

  9. dedecms功能性函数封装(XSS过滤、编码、浏览器XSS hack、字符操作函数)

    dedecms虽然有诸多漏洞,但不可否认确实是一个很不错的内容管理系统(cms),其他也不乏很多功能实用性的函数,以下就部分列举,持续更新,不作过多说明.使用时需部分修改,你懂的 1.XSS过滤. f ...

  10. CSS hack技巧大全

    ——作者:吴雷君 兼容范围: IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome 参考资料: 各游览器常用兼容标记一览表: 标记 IE6 IE7 I ...

随机推荐

  1. C++知识点总结(二)

    1.字符串的部分拷贝 ① 利用标准库函数strncpy(),可以将一字符串的一部分拷贝到另一个字符串中.strncpy()函数有3个参数:第一个参数是目录字符串:第二个参 数是源字符串:第三个参数是一 ...

  2. [51nod1267]4个数和为0(预处理+双指针)

    题意:判断能否从序列中找出4个数的和为0. 解题关键:n^2预处理任意两个数的和,sort一下,双指针进行判定. 此解法尚存在一个问题,就是左右枚举的时候如果相同的有许多的时候该左边移动还是右边移动 ...

  3. Learning Python 012 函数式编程 2 返回函数 匿名函数 装饰器 偏函数

    Python 函数式编程 2 返回函数 返回函数的意思就是:函数作为返回值.(高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回.) 举个例子:实现一个可变参数的求和. 正常的函数: de ...

  4. hadoop-2.3.0-cdh5.1.0完全分布式集群配置及HA配置(待)

    一.安装前准备: 操作系统:CentOS 6.5 64位操作系统 环境:jdk1.7.0_45以上,本次采用jdk-7u55-linux-x64.tar.gz master01 10.10.2.57  ...

  5. c/c++转义字符大全【转自互联网】

    将转义字符收集如下:转义字符 意义 ASCII码值(十进制) \a 响铃(BEL) 007 \b 退格(BS) 008 \f 换页(FF) 012 \n 换行(LF) 010 \r 回车(CR) 01 ...

  6. 16. 再说 WAF 绕过

    1,大小写混排 这可以算最容易想到的方式了.大小写绕过用于只针对小写或大写的关键字匹配技术,正则表达式 /express/i 大小写不敏感即无法绕过,这是最简单的绕过技术. 举例: z.com/ind ...

  7. POJ 3691 DNA repair (DP+字符串)

    题意:给出nn(1≤n≤50,1≤n≤50) 个病毒DNA序列,长度均不超过20.现在给出一个长度不超过1000的字符串,求至少要更换多少个字符, 才能使这个字符串不包含这些DNA序列. 析:利用前缀 ...

  8. BZOJ 1012【线段树】

    题意: Q L 询问数列最后 L 个数中最大的数. A n 将 n + t ( t_init = 0 ), 然后插到最后去. 思路: 感觉动态地插入,很有问题. 数组地长度会时常变化,但是可以先预处理 ...

  9. Oracle12c 数据库找到Scott账户的方法

    因为Oracle12c数据库中引入了CDB与PDB的概念(具体介绍请参考潇湘隐者的文章http://www.cnblogs.com/kerrycode/p/3386917.html),我们之前常用的练 ...

  10. MySQL 逻辑备份mysqldump&mysqlpump&mydumper原理解析

    目录 准备 mysqldump备份 mysqlpump备份 mydumper备份 想弄清除逻辑备份的原理,最好的办法是开启general_log,一探究竟 准备 创建用户 CREATE USER IF ...