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. Spring IOC 少

    控制反转好处 IOC:控制反转也叫依赖注入,IOC利用java反射机制,AOP利用代理模式.所谓控制反转是指,本来被调用者的实例是有调用者来创建的,这样的缺点是耦合性太强,IOC则是统一交给sprin ...

  2. 报错:org.springframework.dao.InvalidDataAccessApiUsageException: Executing an update/delete query; nested exception is javax.persistence.TransactionRequiredException: Executing an update/delete query

    service实现类上没有加@transaction 事务注解

  3. 36、EST-SSR标记开发

    转载:http://fhqdddddd.blog.163.com/blog/static/1869915420124131096557/ MISA工具提供批量识别和定位简单重复序列(SSR),EST序 ...

  4. ARC097E Sorted and Sorted

    传送门 题目 There are 2N balls, N white and N black, arranged in a row. The integers from 1 through N are ...

  5. Umbraco Examine 实现Fuzzy search

    在Umbraco examine search项目开发中,有一个需求, 就是intercom 和 intercoms需要返回同样的结果 也就是说 搜索intercom 时, 能返回包含intercom ...

  6. 怎么触发gridview 的SelectedIndexChanged事件?

    <asp:GridView onclick="javascript:SelectedIndexChanged()" ID="GridView1" runa ...

  7. 定时处理组件---Quartz.net

    1.认识任务调度 所谓任务调度,就是以将业务区块任务化(即抽象成每一个独立的任务,执行每个任务便完成某种业务的需求).比如,我们有一个订单系统,现在有这样的一个需求,就是需要在某一时间点去扫描数据库, ...

  8. 开发php接口注意点

    1.制定规范 开发前一定要定好一个规范,比如要定好数据返回的通用参数和格式.关于数据格式,用的比较多的有xml和json,我建议用json,因为json比xml的好处更多. 2.精简的返回数据 接口数 ...

  9. Exceptionless - .Net Core开源日志框架

    Exceptionless - .Net Core开源日志框架 作者:markjiang7m2 原文地址:https://www.cnblogs.com/markjiang7m2/p/11020140 ...

  10. Mac 安装flutter 踩坑记

    完整版请看链接: http://b36d5043.wiz03.com/share/s/2Prl132RpQ3x2XpA4I2oTa2204K0FF0vB4J42tWIEQ04UrAg 首先下载flut ...