兼容问题

点击查看代码
1、图片加 a 标签在 IE9 中会有边框(必会)
解决方案:img{border:none;}

2、rgba 不支持 IE8(必会)
解决方案:可以用 opacity
eg:opacity:0.7;/*FF chrome safari opera*/
filter:alpha(opacity:70);/*用了 ie 滤镜,可以兼容 ie*/
但是,需要注意的是,opacity 会影响里面元素的透明度

3、display:inline-blockie6/7 不支持(必会)
解决方案:Display:inline-block;Display:inline; 

4、不同浏览器的标签默认的外补丁和内补丁不同(必会)
问题:随便写几个标签,不加样式控制的情况下,各自的 margin 和 padding 差异较大。
解决方案:CSS 里*{margin:0;padding:0;}

5、块属性标签 float 后,又有横行的 margin 情况下,在 IE6显示 margin 比设置的大(必会)
问题:IE6 中后面的一块被顶到下一行
解决方案:在 float 的标签样式控制中加入 display:inline;将其转化为行内属性

6、设置较小高度标签(一般小于 10px),在 IE6,IE7 中高度超出自己设置高度(必会)
问题:IE6、7 里这个标签的高度不受控制,超出自己设置的高度
解决方案:给超出高度的标签设置 overflow:hidden;或者设置行高 line-height 小于你设置的高度。
注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是 IE8 之前的浏览
器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默
认的行高。

7、IE9 一下浏览器不能使用 opacity(必会)
解决方案:
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0,
opacity = 50); 8、IE6 背景闪烁的问题(必会)
问题:链接、按钮用 CSSsprites 作为背景,在 ie6 下会有背景图闪烁的现象。原因是 IE6 没有将
背景图缓存,每次触发 hover 的时候都会重新加载
解决:可以用 JavaScript 设置 ie6 缓存这些图片:
document.execCommand("BackgroundImageCache", false, true); 

9、event 事件问题:(必会)
//event 事件问题
document.onclick=function(ev){//谷歌火狐的写法,IE9 以上支持,往下不支持;
var e=ev;
console.log(e);
}
document.onclick=function(){//谷歌和 IE 支持,火狐不支持;
var e=event;
console.log(e);
}
document.onclick=function(ev){//兼容写法;
var e=ev||window.event;
var mouseX=e.clientX;//鼠标 X 轴的坐标
var mouseY=e.clientY;//鼠标 Y 轴的坐标
}

10、DOM 节点相关的问题(必会)
//DOM 节点相关,主要兼容 IE 6 7 8
function nextnode(obj){//获取下一个兄弟节点
if (obj.nextElementSibling) {
return obj.nextElementSibling;
} else{
return obj.nextSibling;
};
}
function prenode(obj){//获取上一个兄弟节点
if (obj.previousElementSibling) {
return obj.previousElementSibling;
} else{
return obj.previousSibling;
};
}
function firstnode(obj){//获取第一个子节点
if (obj.firstElementChild) {
return obj.firstElementChild;//非 IE678 支持
} else{
return obj.firstChild;//IE678 支持
};
}
function lastnode(obj){//获取最后一个子节点
if (obj.lastElementChild) {
return obj.lastElementChild;//非 IE678 支持
} else{
return obj.lastChild;//IE678 支持
};
}

11、设置监听事件:(必会)
//设置监听事件
function addEvent(obj,type,fn){//添加事件监听,三个参数分别为 对象、事件类型、事件处理函数,
默认为 false
if (obj.addEventListener) { obj.addEventListener(type,fn,false);//非 IE
} else{ obj.attachEvent('on'+type,fn);//ie,这里已经加上 on,传参的时候注意不要重复加了
};
}
function removeEvent(obj,type,fn){//删除事件监听
if (obj.removeEventListener) { obj.removeEventListener(type,fn,false);//非 IE
} else{ obj.detachEvent('on'+type,fn);//ie,这里已经加上 on,传参的时候注意不要重复加了
};
}

12、阻止事件冒泡:(必会)
//js 阻止事件冒泡,这里使用 click 事件为例
document.onclick=function(e){ var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C 标准
}else{
e.cancelBubble=true;//IE....
}
}

13、阻止默认事件:(必会)
//js 阻止默认事件
document.onclick=function(e){ var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C 标准
}else{
e.returnValue='false';//IE..
}
}

14、 IOS 移动端 click 事件 300ms 的延迟响应(必会)
解决方案:
fastclick 可以解决在手机上点击事件的 300ms 延迟
zepto 的 touch 模块,tap 事件也是为了解决在 click 的延迟问题
触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定
ontouchstart 事件,加快对事件的响应,解决 300ms 延迟问题

15、一些情况下对非可点击元素如(label,span)监听click事件,
ios 下不会触发(必会)
解决方案:css 增加 cursor:pointer。

16、三星手机遮罩层下的 input、select、a 等元素可以被点击
和 focus(点击穿透) (必会)
有两种解决方案,
1.是通过层显示以后加入对应的 class 名控制,截断显示层下方可获取焦点元素的事件获取
2.是通过将可获取焦点元素加入的 disabled 属性,也可以利用属性加 dom 锁定的方式(disabled
的一种变换方式)

17 Input 的 placeholder 会出现文本位置偏上的情况(必会)
input 的 placeholder 会出现文本位置偏上的情况:PC 端设置 line-height 等于 height 能够对齐,而
移动端仍然是偏上,解决是设置 line-height:normal

原文地址:http://www.cnblogs.com/strundent/p/16883605.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性