ie7浏览器兼容问题
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浏览器兼容问题的更多相关文章
- IE7+ 浏览器兼容预览本地图片
css #preview_fake { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); o ...
- 一个简单有效的兼容IE7浏览器的办法
最近发现了一个简单有效的兼容IE7浏览器的办法 直接将下面代码复制道页面 <meta http-equiv="X-UA-Compatible" content="I ...
- 怎么用css hack处理各浏览器兼容IE6，IE7,IE8,IE9/ FF
第一:什么事浏览器兼容性 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题.在网站的设计和制作中,做好浏览器兼容,才能够让网站 ...
- CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS-各种cs样式之浏览器兼容处理方式汇总大全（更新中...）
页面模板 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 ...
- js快速判断IE浏览器(兼容IE10与IE11)
在很多时候,我们一般采用navigator.userAgent和正则表达来判断IE浏览器版本,下面介绍用IE浏览器中不同特性来判断IE浏览器 1 判断IE浏览器与非IE 浏览器 IE浏览器与非IE ...
- web前端~~浏览器兼容问题（百度）
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
- 关于浏览器兼容问题及hack写法
浏览器的兼容问题 1.浏览器内核: Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( ...
- 转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks
[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...
随机推荐
- 高斯消元模板（pascal）
洛谷P3389评测 program rrr(input,output); const eps=1e-8; var a:..,..]of double; n,i,j,k:longint; t:doubl ...
- 洛谷 P2574 XOR的艺术
刚刚学了,线段树,一道线段树入门题试试水 下面是题面 题目描述 AKN觉得第一题太水了,不屑于写第一题,所以他又玩起了新的游戏.在游戏中,他发现,这个游戏的伤害计算有一个规律,规律如下 1. 拥有一个 ...
- [BZOJ1195]最短母串
1195: [HNOI2006]最短母串 Time Limit: 10 Sec Memory Limit: 32 MB Description 给定n个字符串(S1,S2,„,Sn),要求找到一个最 ...
- oracle获取clob调优
引用Oracle.DataAccess.dll,,在oracle 安装目录下的D:\oracle\product\10.2.0\db_1\ODP.NET\bin\1.x\Oracle.DataAcce ...
- 【NOI2006】聪明的导游
[NOI2006]聪明的导游 题面 洛谷 题目描述 小佳最近迷上了导游这个工作,一天到晚想着带游客参观各处的景点.正好 M 市在举行 NOI,来参观的人特别的多.不少朋友给小佳介绍了需要导游的人. M ...
- arp 投毒实验
1.查看kali2.0和kali2.0.0的IP地址,如图1和图2,其中192.168.1.133作为攻击者,192.168.1.109作为PC访问FTP服务器192.168.1.234 图1 图2 ...
- URAL1519 Formula 1 【插头dp】
题目链接 URAL1519 题解 看题型显然插头\(dp\) 考虑如何设计状态 有这样一个方案 当我们决策到某个位置 轮廓线长这样 你会发现插头一定是相互匹配的 所以我们实际上可以把状态用括号序列表示 ...
- makefile使用笔记（二）变量
By francis_hao Oct 30,2017 makefile中可以使用变量,变量有多种类型,下面分别介绍 简单变量 简单变量的命名规则和c语言一致. 给变量赋值就表示创建了这个变量 ...
- libiop网络库数据结构和基础知识
最近朋友推荐,学习了libiop这个网络库,作者封装的很全面,代码很简洁 适合初学者学习基于事件驱动的网络io 先看看iop_def.h, 这里面定义了常用的数据结构 tag_iop_base_t 主 ...
- 设置texture
//获取内部资源贴图 public void setInsideTexture() { Texture2D texture = Resources.Load(texture_url) as Textu ...