关于IE的一些hack
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的更多相关文章
- css常用hack
原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...
- CSS3_01之选择器、Hack
1.兄弟选择器:①相邻兄弟选择器:元素的后一个兄弟元素,选择器1+选择器2:②通用兄弟选择器:元素后的所有兄弟元素,选择器1~选择器2: 2.属性选择器:attr表示属性名称,elem表示元素名:①[ ...
- CSS Hack技术介绍及常用的Hack技巧集锦
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
- Medial Queries的另一用法——实现IE hack
众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的.比如说使用"\0","\"和"\9"来 ...
- CSS Hack
CSS HACK,网上有很多,主要是IE版本不同造成的,尽量不要用CSS HACK,实在调不过去可以用一用,相信以后随着IE低版本的淘汰,CSS HACK也将不在使用. 类内部HACK IE6识别 - ...
- hack
1.Firefox @-moz-document url-prefix() { .selector { property: value; } }上面是仅仅被Firefox浏览器识别的写法,具体如: @ ...
- 浅谈CSS hack(浏览器兼容)
今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...
- css3复杂选择器+内容生成+Css Hack
1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过 ...
- dedecms功能性函数封装(XSS过滤、编码、浏览器XSS hack、字符操作函数)
dedecms虽然有诸多漏洞,但不可否认确实是一个很不错的内容管理系统(cms),其他也不乏很多功能实用性的函数,以下就部分列举,持续更新,不作过多说明.使用时需部分修改,你懂的 1.XSS过滤. f ...
- CSS hack技巧大全
——作者:吴雷君 兼容范围: IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome 参考资料: 各游览器常用兼容标记一览表: 标记 IE6 IE7 I ...
随机推荐
- SQL查询语句大全集锦
SQL查询语句大全集锦 一. 简单查询 简单的Transact-SQL查询只包括选择列表.FROM子句和WHERE子句.它们分别说明所查询列.查询的 表或视图.以及搜索条件等. 例如,下面的语句查询t ...
- ViewPageIndicator--仿网易的使用
仿微信(网易的界面) 第一步: AndroidManifest.xml 的配置 <?xml version="1.0" encoding="utf-8"? ...
- sell01 环境搭建、编写持久层并进行测试
1 环境配置 JDK 1.8 MAVEN 3.5 MYSQL 5.7 VirtualBox 5.1 2 搭建MYSQL环境 下载 VM 和 虚拟镜像文件 虚拟镜像文件:点击前往 技巧01:安装完vir ...
- CF1041F Ray in the tube
挂上Chester大神的解题报告 有一个思维跳跃的地方,就是不应该枚举所有的$B$点,而是应该在选定一个$A$点之后枚举距离计算. 然后我们发现枚举距离是$2^k$的长度就可以了,证明如下: 假如距离 ...
- 【机器学习】EM最大期望算法
EM, ExpectationMaximization Algorithm, 期望最大化算法.一种迭代算法,用于含有隐变量(hidden variable)的概率参数模型的最大似然估计或极大后验概率估 ...
- 20.Ecshop 2.x/3.x SQL注入/任意代码执行漏洞
Ecshop 2.x/3.x SQL注入/任意代码执行漏洞 影响版本: Ecshop 2.x Ecshop 3.x-3.6.0 漏洞分析: 该漏洞影响ECShop 2.x和3.x版本,是一个典型的“二 ...
- 高性能服务器设计(Jeff Darcy's notes on high-performance server design
高性能服务器设计(Jeff Darcy's notes on high-performance server design 我想通过这篇文章跟大家共享一下我多年来怎样开发“服务器”这类应用的一些想法和 ...
- NVI模式
简介: --NVI即(Non-VIrtual Interface)模式强化依赖倒置,介于 Virtual与No Virtual 之间 允许子类重新实现 也可以在父类中对子类 进行限制和其它操作. 由来 ...
- 对Json的一些理解
标准json格式:{"name":"王大昭","url":"https://www.cnblogs.com/codezhao/&q ...
- OpenStack API映射分析
Nova代码阅读 确定服务类型 RPC服务 WSGI服务 查询cmd目录下的对应的服务启动脚本,根据服务创建方式来判断服务类型,service.WSGIService表示WSGI服务,service. ...