兼容问题

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