2019独角兽企业重金招聘Python工程师标准>>>

前段时间的一个项目,要做ie8及以上的兼容,那个做的我真的是蛋疼,菊花紧啊。。。。

当时就想问问微软ie的部门,你们到底想干虾米,这不是要逼死前段工程师吗。。。。

然后去Google上面找了好多关于兼容的文档,然后归类了一些,希望有跟我一样碰到这种问题的朋友们能够得到帮助,嘿嘿

以下我总结简单总结了几条:

  1. 不管你是不是做兼容,做为一个前端工程师,都要养成一个习惯,那就是用类(class)来控制样式(css),用id来控制脚本(JavaScript),那这是为什么呢?  道理其实很简单,在ie8以下的浏览器中,对于以下

#first #second{color:red;
}

这种写法是找不到这个元素的,所以有时候你会发现在google浏览器里很和平的事情,到了ie中这个css就完全消失了。

还有控制样式为什么要用id呢?因为id获取到元素的步骤是最节约资源的,而且也是最直接的,所以各位新手小白前端们, 记住这个重要的步骤吧,肯定会少走很多弯路的

2.    因为要兼容ie8,而ie8是不支持css3.0的,有可能你的第一反应是,那就不用那些比较酷炫的效果喽,然而如果你只是这么想,那就图样了。。。  在css2.0中,对于css那些比较好用的选择器,也是不支持的,举个最简单的例子哈,css2.0是支持:first-child这个选择器的,而:last-child是不支持的,是不是很无语,反正我当时看到文档的时候是没话说了。。。。

3.接下来提供几种ie浏览器的css hack 方法:

这是w3c的标准写法:

margin:0;

ie6:

_margin:0;

ie7:

*margin:0;

ie8:

margin:0\9;

ie9/10:

margin:0\9\0;

4.我们都知道ie8是不支持css3.0属性的,但是有的时候没办法,领导就是想在ie8下看到边框圆角,那咋办嘞,

这里提供一种方法

div{border-radius:5px;behavior:url(/pie.htc);
}

看到这里肯定有朋友会问了,这个htc(下面我称呼它为火腿肠)是干嘛用的嘞,其实很简单,因为ie8的内核是没有css3.0的那种圆角算法的,所以需要提供一个脚本来供它计算,哎。。。。这坑爹的ie啊,5555555~

5.那就会有朋友来问了,万一领导要是想用哪个html5的属性咋办,ie8也是不兼容html5的呀。。。。

对,我也遇到了同样蛋碎的问题,具体咋办类,在这里,我已html中的placeholder这个属性为例,

我们借用jQuery,将这个属性强行的注入的input元素中,来看代码:

(function ($) {//动态的在input中加入一个input属性$.support.placeholder = ('placeholder' in document.createElement('input'));
})(jQuery);//fix for IE7 and IE8
$(function () {if (!$.support.placeholder) {$("[placeholder]").focus(function () {if ($(this).val() == $(this).attr("placeholder")) $(this).val("");}).blur(function () {if ($(this).val() == "") $(this).val($(this).attr("placeholder"));}).blur().parents("form").submit(function () {$(this).find('[placeholder]').each(function() {if ($(this).val() == $(this).attr("placeholder")) {$(this).val("");}});});}
});

6.介绍了这么多细节上的兼容,那么接下来就介绍一下比较简单的框架兼容,在这里我么你是用了zui这个前端的ui框架,地址在这里   zui.sexy/#/  ,那么它的兼容方法我也顺便提一下吧,我们要在css文件加载之后,马上加载一下两个文件,

<!-- h5标签兼容-->
<script src="/bower_components/zui/dist/lib/ieonly/html5shiv.js" ></script>
<!-- 响应式布局兼容-->
<script src="/bower_components/zui/dist/lib/ieonly/respond.js" ></script>

记住,在加载完css文件之后,越快加载这两个文件越好。

好啦,以上就是我在做ie兼容的时候遇到的一些蛋碎的问题,不管又没用,还是希望能够帮到需要的人,嘿嘿


转载于:https://my.oschina.net/codingBingo/blog/632781

让人“蛋碎”的ie兼容问题相关推荐

  1. 这个爱喝酒的酒鬼可真是让人操碎了心

    全世界只有3.14 % 的人关注了 数据与算法之美 最近又有一道数学难题重现江湖,在数学的江湖上掀起了腥风血雨. 为了这道题,武林中也衍生出了三个门派!分别有75%派,90%派,50%派. 打完这么多 ...

  2. 张文骁:游戏开发的“零件人”梦碎之后|OneFlow U

    张文骁,一流科技研发工程师.2008年,本科毕业于四川大学软件工程,研究生毕业于华中科技大学.爱好很多,游戏.篮球.动漫都可以玩. 出于个人兴趣,研究生毕业之后,他把游戏爱好转变成一份工作,但三年之后 ...

  3. 5G上行,真是让人操碎了心!

    本文转载自公众号无线深海 5G时代,"快"仿佛成了最嘹亮的主打歌. 可是,5G在频谱效率上跟4G相比并没有本质的不同,因此只能靠增大信号带宽来支撑. 于是5G最先建设的频谱就落在了 ...

  4. apt cyg 安装php,Cygwin的包管理器:apt

    本站文章除注明转载外,均为本站原创或者翻译. 本站文章欢迎各种形式的转载,但请18岁以上的转载者注明文章出处,尊重我的劳动,也尊重你的智商: 本站部分原创和翻译文章提供markdown格式源码,欢迎使 ...

  5. python自动化运维平台能用php开发吗_关于数据库自动化运维平台的设计及开发实现思路...

    今个讲解下,个人对于数据库运维自动化平台的理解,话说这个项目和我以前做的lvs集群平台一样,都是分成两个主要的角色,一个是对于普通用户的申请及权限内的执行,还有一个是对于dba的审核及相关的日常dba ...

  6. 一个简单WCF项目的建立 by wsz

    由于搬砖的需要,不得不学一点与WCF有关的东西.具体是因为前几周在64位环境下写的一个dll不能被集成到合作伙伴的32位工程中,但是要修改文件实在是划不来,一个压缩后600M的文件搬来搬去的也是让人蛋 ...

  7. odbc数据库access丢失_有关使用access数据库,odbc中碰到的一些问题。

    年前写的一个j2ee小项目,数据库用的access,生产环境是在本机,xp,office2003 连接参数如下: driverName=sun.jdbc.odbc.JdbcOdbcDriver url ...

  8. flutter友盟分享_集成推送那点事-友盟/Mob-Flutter/FCM

    第 97 次推文 LZ-Says 我们都曾羡慕别人,却忘了,我们也曾是别人羡慕的我们. 推荐直接拉到底阅读原文- 前言 最近的任务呐,真是让人蛋碎一地,各种被锤. 不过比较 nice 的是,推送凑齐了 ...

  9. 中国象棋程序的设计与实现(三)--2012本科毕业论文等重要文档资料

    最近陆续发表了中国象棋程序的截图和源码,受到了不少CSDN网友的好评.中国象棋程序是我大学时期的最佳原创作品,同时这也是我的毕业设计选题.当然,我开发中国象棋主要还是为了锻炼.今天,正式向广大网友分享 ...

最新文章

  1. 【iOS-Cocos2d游戏开发之十二】浅析使用C++/C/OC进行iOS游戏混编出现“failed with exit”问题与小结;...
  2. 盗版与互联网是一对连体婴,会员制背后才是那把手术刀!
  3. android 勿扰模式代码,android Lollipop勿扰模式
  4. 维基媒体宣布采用 Vue.js 进行前端开发
  5. 向pandas DataFrame添加一行
  6. HLS playlist典型示例
  7. QT Creator 环境使用 remote debug 调试 arm 程序
  8. 进化论是个假说,目前解释生物现象最合理
  9. 2020 VIVO 面经
  10. MD5详解(校验文件完整性)
  11. 简单的限流保护电路图大全(六款简单的限流保护电路设计原理图详解)
  12. lwj_C#_周总结2 字符串练习
  13. 围棋大师阿里,产品经理腾讯
  14. 手机阅读行业分析(beta)
  15. Delphi/Pascaldelphi盒子
  16. 力扣周赛337场 第一题6319.奇偶位数
  17. ORACLE ORDER BY用法总结
  18. 微信端中的企业号、订阅号、服务号之前的区别
  19. 希腊字母,阿拉伯字母的读音表
  20. 可达100K/月,美团招聘各类安全工程师(地点:北京/上海,内含大量岗位)

热门文章

  1. 信息系统定级与备案工作介绍
  2. map,filter,reduce函数总结
  3. 网络工程师成长日记365-IBIS西安工程回忆录
  4. python类的继承-1
  5. 关于OC的内存管理-01
  6. html页面头部里的meta
  7. 计算机组成原理课程内容,计算机组成原理课程教学大纲.doc.doc
  8. android studio 7200u,超惊艳的设计!微软正式将Surface Studio和Surface Laptop带进中国:设计师们都看哭了...
  9. 【十大经典排序算法】java实现--希尔排序(4)
  10. 03-spring bean