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. bzoj4484[JSOI2015]最小表示

    题意 给出一张DAG,要求删除尽量多的边使得连通性不变.(即:若删边前u到v有路径,则删边后仍有路径).点数30000,边数100000. 分析 如果从u到v有(u,v)这条边,且从u到v只有这一条路 ...

  2. 【bzoj5174】[Jsoi2013]哈利波特与死亡圣器 二分+树形dp

    题目描述 给你一棵以1为根的有根树,初始除了1号点为黑色外其余点均为白色.Bob初始在1号点.每次Alice将其中至多k个点染黑,然后Bob移动到任意一个相邻节点,重复这个过程.求最小的k,使得无论B ...

  3. windows上配置连接git

    Windows7上安装Git   我首先是百度到了这个网站:https://git-scm.com/download/win 这个网站上有下载链接,你可以根据你的系统选择不同的下载链接,我的是Win7 ...

  4. C++解析-外传篇(2)：函数的异常规格说明

    0.目录 1.异常规格说明 2.unexpected() 函数 3.小结 1.异常规格说明 问题: 如何判断一个函数是否会抛出异常,以及抛出哪些异常? C++提供语法用于声明函数所抛出的异常 异常声明 ...

  5. [SDOI2011]黑白棋 kth - nim游戏

    题面 题面 题解 观察题目,我们可以发现,这个游戏其实就是不断再把对方挤到一边去,也就是黑子不断往左走,白子不断往右走. 因此可以发现,如果将黑白子按顺序两两配对,那么它们中间的距离会不断缩小,且每次 ...

  6. 行列式(二)：余子式&代数余子式

    目录 按行列展开 \(\Delta\)以下内容主要为<线性代数>的学习笔记 按行列展开 一般来说,低阶行列式的计算比高阶行列式的计算要简单得多,因此考虑用低阶行列式来表示高阶行列式.为此, ...

  7. bzoj2969 矩形粉刷 概率期望

    此题在bzoj是权限题,,,所以放另一个oj的链接 题解: 因为期望线性可加,所以可以对每个方格单独考虑贡献.每个方格的贡献就为至少被粉刷过一次的概率×1(每个格子的最大贡献就是1...)每个方格至少 ...

  8. 洛谷 [POI2007]BIU-Offices 解题报告

    [POI2007]BIU-Offices 题意 给定\(n(\le 100000)\)个点\(m(\le 2000000)\)条边的无向图\(G\),求这个图\(G\)补图的连通块个数. 一开始想了半 ...

  9. Java试题二

    QUESTION 37Given:1. class Super {2. private int a;3. protected Super(int a) { this.a = a; }4. } ...1 ...

  10. Redis基操

    Redis key-value类型的缓存数据库 指定IP和端口连接redis: ./redis-cli -h ip -p port Redis基本操作命令 命令 返回值 简介 ping PONG 测试 ...