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. FragmentTransaction add 和 replace 区别 转

    使用 FragmentTransaction 的时候,它提供了这样两个方法,一个 add , 一个 replace . add 和 replace 影响的只是界面,而控制回退的,是事务. public ...

  2. KMPnext数组自看

    emm...无数次再看kmp了 因为一直没做相关的题..看了就忘看了就忘..emm.. next[i]表示去掉第i个元素后,自已的前缀和后缀完全匹配的最大长度 例 字符串 a b a b a b z ...

  3. Qt的编程风格与规范

    Qt的编程风格与规范 来源: http://blog.csdn.net/qq_35488967/article/details/70055490 参考资料: https://wiki.qt.io/Qt ...

  4. 【NuGet】使用NuGet打包并发布至ProGet过程 （步骤详细，附python脚本）【上篇】

    一.基本知识 (1)NuGet : NuGet是一个为大家所熟知的Visual Studio扩展,通过这个扩展,开发人员可以非常方便地在Visual Studio中安装或更新项目中所需要的第三方组件, ...

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

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

  6. Linux系统启动详解（二）

    上节讲到了Linux启动大体流程,及grub的作用,本节主要扯扯initramfs的那些事,并且通过简单修改initramfs,将整体操作系统运行到了内存中. 3       initramfs 3. ...

  7. 简单的函数——Min_25筛

    %%yyb %%zsy 就是实现一下Min-25筛 筛积性函数的操作 首先要得到 $G(M,j)=\sum_{t=j}^{cnt} \sum_{e=1}^{p_t^{e+1}<=M} [\phi ...

  8. HDU 4372 Count the Buildings——第一类斯特林数

    题目大意:n幢楼,从左边能看见f幢楼,右边能看见b幢楼 楼高是1~n的排列. 问楼的可能情况 把握看到楼的本质! 最高的一定能看见! 计数问题要向组合数学或者dp靠拢.但是这个题询问又很多,难以dp ...

  9. vue2.0 安装及项目搭建（一）

    基本环境安装 1.安装node:从node.js官网下载并安装node.测试:win+R(打开命令行)-------输入cmd-------敲入node -v.如果出现相应版本号,即安装成功: 2.测 ...

  10. Django summernote 富文本

    Summernote is a simple WYSIWYG editor. GITHUB:https://github.com/summernote/django-summernote SETUP ...