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. 双飞翼布局介绍-始于淘宝UED

    仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术 ...

  2. Jmeter连接MySQL配置(能执行多条sql语句)

    Database URL为MySQL的连接串,如果要执行多条SQL语句,后面还要添加“?allowMultiQueries=true”

  3. 2、java 启动参数

    1.java启动参数共分为三类: 其一是标准参数 (-),所有的JVM实现都必须实现这些参数的功能,而且向后兼容:其二是非标准参数 (-X),默认jvm实现这些参数的功能,但是并不保证所有jvm实现都 ...

  4. 在VM12中安装ubuntu系统下的VMTOOLS

    转载自http://www.jb51.net/article/97387.htm 一.下载Ubuntu镜像: Ubuntu官网下载地址 二.创建虚拟机 打开VMware Workstation,点击创 ...

  5. filter与servlet的比较

    filter与servlet的比较   主要从如下四个方面介绍他们之间的区别:                1.概念.                2.生命周期.                3 ...

  6. [转载]Java程序员掌握的10大项知识体系--精通太难说出口

    1.语法:必须比较熟悉,在写代码的时候IDE的编辑器对某一行报错应该能够根据报错信息知道是什么样的语法错误并且知道任何修正. 2.命令:必须熟悉JDK带的一些常用命令及其常用选项,命令至少需要熟悉:a ...

  7. 基于netty框架的轻量级RPC实现(附源码)

    前言 Rpc( Remote procedure call):是一种请求 - 响应协议.RPC由客户端启动,客户端向已知的远程服务器发送请求消息,以使用提供的参数执行指定的过程.远程服务器向客户端发送 ...

  8. docker私有仓库的搭建

    Docker搭建本地私有仓库的详细步骤 Dockers不仅提供了一个中央仓库,同时也允许我们使用registry搭建本地私有仓库.使用私有仓库有许多优点:一.节省网络带宽,针对于每个镜像,不用每个人都 ...

  9. Highest Price in Supply Chain (25)(DFS)(PAT甲级)

    #include<bits/stdc++.h>using namespace std;int fa;int degree[100007];vector<int>v[100007 ...

  10. What is Data Driven Testing? Learn to create Framework

    What is Data Driven Testing? Data-driven is a test automation framework which stores test data in a ...