win10 下如何调试Ie

网上有很多ie的测试工具，包括ms自己出的有，但是如果是win10系统，压根不需要这些玩意。

win10 浏览器edge虽然是重写过的,但是win10并没有完全抛弃ie，可能是为了照顾xxx人习惯ie,打开之后,按F12打开开发工具，

这样就可以用各个版本调试了。

Ie注意事项

html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。

respond.min：让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

letskillie6.zh_CN.pack.js：IE6时代已经成为历史,尤其是许多IE6的老标准成为现在开发的诟病.给使用IE6的老用户发出一个提醒。

  <!--[if lt IE 9]>

     <script src="@ViewHelper.Content("/content/js/html5shiv.js")"></script>

     <script src="@ViewHelper.Content("/content/js/respond.min.js")"></script>

     <![endif]-->

     <!--[if lt IE 6]>

     <script src="@ViewHelper.Content("/content/js/letskillie6.zh_CN.pack.js")"></script>

     <![endif]-->

当然可以直接使用bootcdn，http://www.bootcdn.cn/

Ie常见兼容

1、ie7 、8 不支持hover

解决思路：使用js来控制

2、ie的层级定位蔗照问题

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

         .div1 {height: 80px;border: 1px solid red;position: relative;}

         .div11 {width: 200px;height: 60px;position: absolute;left: 50px;top: 50px;background: orange;}

         .div2 {margin-top: 10px;height: 80px;border: 1px solid blue;position: relative; background-color: red}

     </style>

 </head>

 <body>

 <div class="div1">

     <div class="div11"></div>

 </div>

 <div class="div2">

 </div>

 </body>

 </html>

如上代码的结果：

如图有部分被父容器的兄弟元素覆盖；

解决思路：父容器与父容器的兄弟元素设置z-index，且父容器z-index大于父容器的兄弟元素；

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

         .div1 {height: 80px;border: 1px solid red;position: relative;

             z-index: 99;}

         .div11 {width: 200px;height: 60px;position: absolute;left: 50px;top: 50px;background: orange;}

         .div2 {margin-top: 10px;height: 80px;border: 1px solid blue;position: relative; background-color: red;z-index: 1}

     </style>

 </head>

 <body>

 <div class="div1">

     <div class="div11"></div>

 </div>

 <div class="div2">

 </div>

 </body>

 </html>

3、e.stopPropagation(); ie6 、7 不支持

解决思路：

  e = e || window.event;

      if (e.stopPropagation) e.stopPropagation();

      else if (window.event)

         window.event.cancelBubble = true;// 针对 IE

4、IE不支持getElementsByClassName

解决思路：如果涉及到的元素很少，可以考虑加个id,反之给document对象里加入getElementsByClassName这个方法，这样的写法有一个好处，你什么不要改，这也算是符合了开闭原则。调用时加个判断，如果支持getElementsByClassName则不管，不支持则调用自己定义的getElementsByClassName；

 var getElementsByClassName = function (searchClass, node,tag) {

 if(document.getElementsByClassName){

 var nodes = (node || document).getElementsByClassName(searchClass),result = [];

 for(var i=0 ;node = nodes[i++];){

 if(tag !== "*" && node.tagName === tag.toUpperCase()){

 result.push(node)

 }else{

 result.push(node)

 }

 }

 return result

 }else{

 node = node || document;

 tag = tag || "*";

 var classes = searchClass.split(" "),

 elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),

 patterns = [],

 current,

 match;

 var i = classes.length;

 while(--i >= 0){

 patterns.push(new RegExp("(^|\s)" + classes[i] + "(\s|$)"));

 }

 var j = elements.length;

 while(--j >= 0){

 current = elements[j];

 match = false;

 for(var k=0, kl=patterns.length; k<kl; k++){

 match = patterns[k].test(current.className);

 if (!match) break;

 }

 if (match) result.push(current);

 }

 return result;

 }

 }

5、IE 双边距

解决思路：浮动元素加上display:inline

6、IE 清除浮动：
解决思路：

1、在IE8+以及主流的浏览器中，都支持:after这个伪类

 .clear{

 content: " ";

     clear: both;

     visibility: hidden;

     display: block;

     height:;

 }

2、增加空元素，不推荐

给代码增加了无意义的元素；

3、父容器增加overflow ，不推荐

overflow 嵌套多了多少会存在问题；

4、推荐的写法

 .clearfix:after {content:"\200B"; display:block; height:; clear:both; }

 .clearfix { *zoom:; }

......待续 20170818  ......

7、ios input select 边框阴影

 input{

     -webkit-appearance: none;

 }

8、new Date(‘2017-08-18’)的浏览器兼容性问题

在ie 以及 Firefox 不能正确生成Date()对象

 var time2 = (timeend+' 23:59:59').toString();

 timestart = new Date(Date.parse(str.replace(/-/g,"/"))).getTime();

 timeend = new Date(Date.parse(str.replace(/-/g,"/"))).getTime();

'2017-08-18' 无法被各个浏览器中，使用new Date(str)来正确生成日期对象的，正确做法是把日期格式转换为 2017/08/18

9、ios 中body 无法监听click事件

在body 中嵌套一层容器 如 div section artifact

 <body>

 <div class='contentMainBox'>

 ...

 ...

 ...

 </div>

 </body>

10、audio ios不能自动播放

如果是基于web 如 微信：

 utility = {

     playAudio: function (id, src) {

         var audio = $('#' + id);

         if (audio.attr('src') == 'undefined') {

             audio.attr('src', src);

         }

         function audioAutoPlay() {

             audio[0].play();

             document.addEventListener("WeixinJSBridgeReady", function () {

                 audio[0].play();

             }, false);

         }

         audioAutoPlay();

     }

 }

 utility.playAudio('music','mp3/music.mp3');

或者可以通过监听第一次触摸则播放

利用jq one 监听事件

     $('.mainBox').one('touchstart', function () {

         isAuto = true;

         $('.musicBtn').click();

     });

---------待续---------------

ie7浏览器兼容问题的更多相关文章

  1. IE7+ 浏览器兼容预览本地图片

    css #preview_fake { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); o ...

  2. 一个简单有效的兼容IE7浏览器的办法

    最近发现了一个简单有效的兼容IE7浏览器的办法 直接将下面代码复制道页面 <meta http-equiv="X-UA-Compatible" content="I ...

  3. 怎么用css hack处理各浏览器兼容IE6，IE7,IE8,IE9/ FF

    第一:什么事浏览器兼容性 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题.在网站的设计和制作中,做好浏览器兼容,才能够让网站 ...

  4. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  5. CSS-各种cs样式之浏览器兼容处理方式汇总大全（更新中...）

    页面模板 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 ...

  6. js快速判断IE浏览器(兼容IE10与IE11)

    在很多时候,我们一般采用navigator.userAgent和正则表达来判断IE浏览器版本,下面介绍用IE浏览器中不同特性来判断IE浏览器   1 判断IE浏览器与非IE 浏览器 IE浏览器与非IE ...

  7. web前端~~浏览器兼容问题（百度）

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  8. 关于浏览器兼容问题及hack写法

    浏览器的兼容问题 1.浏览器内核: Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( ...

  9. 转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks

    [总结]浏览器CSS Hacks汇总   浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...

随机推荐

  1. android面试(3)---基本问题

    1.值类型,引用类型? 基本数据类型都是值类型:byte,short,int,long,float,double,char,boolean 其他类型都是引用类型. 引用类型在传入方法是,方法内部对引用 ...

  2. 【转】ssh免密码登录的原理

    工作第一天,就需要登录各种服务器,免密码登录无疑能大大的提高工作效率.以前只知道配置,今天了解了下原理. 免密码登录原理 图解,server A免登录到server B: 1.在A上生成公钥私钥. 2 ...

  3. [HNOI2014]江南乐 博弈论

    题面 题面 题解 首先我们知道一个关于除法的重要性质:对于一个固定的\(i\),表达式\(\frac{i}{m}\)的取值只有根号个. 因此我们考虑如何优化SG函数的求解. 观察到在取值相同的同一段中 ...

  4. 常州day3

    Task1 小 W 得到了一堆石子,要放在 N 条水平线与 M 条竖直线构成的网格的交点上.因为小 M 最喜欢矩形了, 小 W 希望知道用 K 个石子最多能找到多少四边平行于坐标轴的长方形,它的四个角 ...

  5. Linux内核设计第三周学习总结 跟踪分析Linux内核的启动过程

    陈巧然 原创作品 转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 实验步骤 登陆实验楼虚 ...

  6. Django CRM客户关系管理系统

    CRM需求分析 随着信息化时代带来的科技创新,CRM客户关系管理系统带来的效益在已经成为很多企业提高竞争优势的一分部,CRM客户关系管理系统将企业管理和客户关系管理集成到统一的平台,其系统功能主要体现 ...

  7. 洛谷P1029 最大公约数和最小公倍数问题

    题目描述 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件: 1.P,Q是正整数 2.要求P,Q以x0为 ...

  8. 洛谷P1991 无线通讯网

    P1991 无线通讯网 170通过 539提交 题目提供者洛谷OnlineJudge 标签图论 难度普及+/提高 提交该题 讨论 题解 记录 最新讨论 怎么又炸了 为啥一直40!求解! UKE:inv ...

  9. 折腾到死：matlab7.0 安装

    matlab7.0应该是2004年的东西了吧,装起来相当费劲!为什么不用更高的版本呢?其实我也想,之前安装的2013a安装包就5个多G,安装完之后就十多个G了.我习惯将软件安装到C盘,可怜我那100G ...

  10. isnotblank与isnotempty的区别