ie7浏览器兼容问题

win10 下如何调试Ie

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

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

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

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>

如上代码的结果:

ie7浏览器兼容问题

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

解决思路:父容器与父容器的兄弟元素设置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();
});

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

上一篇:万恶技术系列笔记-jupyter工作路径和源文件打开方式


下一篇:Java Web Project自定义错误页面,log4j记录日志。