对于前端开发来说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]-->