前端项目开发中兼容性问题

前端项目开发中兼容性问题

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