让人“蛋碎”的ie兼容问题
2019独角兽企业重金招聘Python工程师标准>>>
前段时间的一个项目,要做ie8及以上的兼容,那个做的我真的是蛋疼,菊花紧啊。。。。
当时就想问问微软ie的部门,你们到底想干虾米,这不是要逼死前段工程师吗。。。。
然后去Google上面找了好多关于兼容的文档,然后归类了一些,希望有跟我一样碰到这种问题的朋友们能够得到帮助,嘿嘿
以下我总结简单总结了几条:
不管你是不是做兼容,做为一个前端工程师,都要养成一个习惯,那就是用类(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兼容问题相关推荐
- 这个爱喝酒的酒鬼可真是让人操碎了心
全世界只有3.14 % 的人关注了 数据与算法之美 最近又有一道数学难题重现江湖,在数学的江湖上掀起了腥风血雨. 为了这道题,武林中也衍生出了三个门派!分别有75%派,90%派,50%派. 打完这么多 ...
- 张文骁:游戏开发的“零件人”梦碎之后|OneFlow U
张文骁,一流科技研发工程师.2008年,本科毕业于四川大学软件工程,研究生毕业于华中科技大学.爱好很多,游戏.篮球.动漫都可以玩. 出于个人兴趣,研究生毕业之后,他把游戏爱好转变成一份工作,但三年之后 ...
- 5G上行,真是让人操碎了心!
本文转载自公众号无线深海 5G时代,"快"仿佛成了最嘹亮的主打歌. 可是,5G在频谱效率上跟4G相比并没有本质的不同,因此只能靠增大信号带宽来支撑. 于是5G最先建设的频谱就落在了 ...
- apt cyg 安装php,Cygwin的包管理器:apt
本站文章除注明转载外,均为本站原创或者翻译. 本站文章欢迎各种形式的转载,但请18岁以上的转载者注明文章出处,尊重我的劳动,也尊重你的智商: 本站部分原创和翻译文章提供markdown格式源码,欢迎使 ...
- python自动化运维平台能用php开发吗_关于数据库自动化运维平台的设计及开发实现思路...
今个讲解下,个人对于数据库运维自动化平台的理解,话说这个项目和我以前做的lvs集群平台一样,都是分成两个主要的角色,一个是对于普通用户的申请及权限内的执行,还有一个是对于dba的审核及相关的日常dba ...
- 一个简单WCF项目的建立 by wsz
由于搬砖的需要,不得不学一点与WCF有关的东西.具体是因为前几周在64位环境下写的一个dll不能被集成到合作伙伴的32位工程中,但是要修改文件实在是划不来,一个压缩后600M的文件搬来搬去的也是让人蛋 ...
- odbc数据库access丢失_有关使用access数据库,odbc中碰到的一些问题。
年前写的一个j2ee小项目,数据库用的access,生产环境是在本机,xp,office2003 连接参数如下: driverName=sun.jdbc.odbc.JdbcOdbcDriver url ...
- flutter友盟分享_集成推送那点事-友盟/Mob-Flutter/FCM
第 97 次推文 LZ-Says 我们都曾羡慕别人,却忘了,我们也曾是别人羡慕的我们. 推荐直接拉到底阅读原文- 前言 最近的任务呐,真是让人蛋碎一地,各种被锤. 不过比较 nice 的是,推送凑齐了 ...
- 中国象棋程序的设计与实现(三)--2012本科毕业论文等重要文档资料
最近陆续发表了中国象棋程序的截图和源码,受到了不少CSDN网友的好评.中国象棋程序是我大学时期的最佳原创作品,同时这也是我的毕业设计选题.当然,我开发中国象棋主要还是为了锻炼.今天,正式向广大网友分享 ...
最新文章
- 【iOS-Cocos2d游戏开发之十二】浅析使用C++/C/OC进行iOS游戏混编出现“failed with exit”问题与小结;...
- 盗版与互联网是一对连体婴,会员制背后才是那把手术刀!
- android 勿扰模式代码,android Lollipop勿扰模式
- 维基媒体宣布采用 Vue.js 进行前端开发
- 向pandas DataFrame添加一行
- HLS playlist典型示例
- QT Creator 环境使用 remote debug 调试 arm 程序
- 进化论是个假说,目前解释生物现象最合理
- 2020 VIVO 面经
- MD5详解(校验文件完整性)
- 简单的限流保护电路图大全(六款简单的限流保护电路设计原理图详解)
- lwj_C#_周总结2 字符串练习
- 围棋大师阿里,产品经理腾讯
- 手机阅读行业分析(beta)
- Delphi/Pascaldelphi盒子
- 力扣周赛337场 第一题6319.奇偶位数
- ORACLE ORDER BY用法总结
- 微信端中的企业号、订阅号、服务号之前的区别
- 希腊字母,阿拉伯字母的读音表
- 可达100K/月,美团招聘各类安全工程师(地点:北京/上海,内含大量岗位)
热门文章
- 信息系统定级与备案工作介绍
- map,filter,reduce函数总结
- 网络工程师成长日记365-IBIS西安工程回忆录
- python类的继承-1
- 关于OC的内存管理-01
- html页面头部里的meta
- 计算机组成原理课程内容,计算机组成原理课程教学大纲.doc.doc
- android studio 7200u,超惊艳的设计!微软正式将Surface Studio和Surface Laptop带进中国:设计师们都看哭了...
- 【十大经典排序算法】java实现--希尔排序(4)
- 03-spring bean