关于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 ...
随机推荐
- uva 10934 Dropping water balloons
你有k个一模一样的水球,在一个n层楼的建筑物上进行测试,你想知道水球最低从几层楼往下丢可以让水球破掉.由于你很懒,所以你想要丢最少次水球来测出水球刚好破掉的最低楼层.(在最糟情况下,水球在顶楼也不会破 ...
- 1、Question: prep_reads.info vs. align_summary.txt
###参考:https://www.biostars.org/p/163356/ used TopHat to map my reads against their relative referenc ...
- 17. CTF综合靶机渗透(十)
靶机描述:欢迎来到超级马里奥主机!这个虚拟机是对真实世界场景场景的模拟.目标是在VM中找到2个标志.根是不够的(对不起!)VM可以以多种方式开发,但请记住枚举是关键.挑战的程度是中等的.感谢VDBAN ...
- hdu 1576 A/B (求逆元)
题目链接 Problem Description 要求(A/B)%9973,但由于A很大,我们只给出n(n=A%9973)(我们给定的A必能被B整除,且gcd(B,9973) = 1). Inpu ...
- Flask 入门(第一篇)
1. 认识 Flask Flask 是一个微型 Web 框架,依赖于 jinjia2 模板系统和 Werkzeug WSGI(本质为 Socket 服务端) 服务,默认情况不支持数据库抽象层.表单验证 ...
- VR中运动控制器的传送系统
创建一个VRPawn 新建一个BluePrint,父类选择Pawn,我们命名为VRPawn,打开它. 添加一个Scene命名为CameraRoot 在CameraRoot节点下添加一个Camera 在 ...
- .NET 中文件嵌套,例如:cshtml文件下面嵌套css和js【机器翻译】
越来越多的我发现自己在我的一些较大的Web项目中丢失了文件.有很多内容要处理 - HTML视图,几个派生CSS页面,页面级CSS,脚本库,应用程序范围的脚本和页面特定的脚本文件等等.幸运的是,我使用R ...
- 死磕 java同步系列之开篇
简介 同步系列,这是彤哥想了好久的名字,本来是准备写锁相关的内容,但是java中的CountDownLatch.Semaphore.CyclicBarrier这些类又不属于锁,它们和锁又有很多共同点, ...
- springmvc ajax 简单例子
1.控制器曾 @Controller public class AjaxController { @RequestMapping("/ajax") public void ajax ...
- C++基本变量类型
算数类型表 类型 含义 最小存储空间 取值范围 bool 布尔型 – char 字符型 8位 -2^7 ~ 2^7-1 wchar_t 宽字符型 16位 short 短整型 16位 -2^15 ...