前端部分兼容性问题汇总

/* 1.滚动条： */
var myScroll = document.documentElement.scrollTop || document.body.scrollTop

/* 2.获取样式 */
function getStyle(dom, styleName) {
    return dom.currentStyle ? dom.currentStyle[styleName] : getComputedStyle(dom)[styleName];
}

/* 3.网页可视区 */
var h = window.innerHeight || document.documentElement.clientHeight;
var w = window.innerWidth || document.documentElement.clientWidth;

/* 4.事件对象 
    这里函数传入的参数e，就是事件，浏览器会实时跟踪用户的行为。
    如e.screenX、e.screenY、e.offsetX、e.offsetY…这种做法在FireFox、Chrome、Safari等遵循W3C规范的浏览器下是没有问题的。
    唯独在IE下是行不通的， IE采用了一种非标准的方式，将事件作为window对象的event属性：window.event、window.event.screenX…
*/
var event = event || window.event;

/* 5.事件目标对象 
IE下,event对象有srcElement属性,但是没有target属性;
Firefox下,even对象有target属性,但是没有srcElement属性。 
请同时注意 事件对象event 的兼容性问题。
*/
var target = event.target || event.srcElement;

/* 6.阻止事件冒泡 
前者是方法，是标准的写法，后者是属性，赋值true表示阻止，是IE的写法。
判断stopPropagation是否存在，如果存在则用标准写法否则则用IE的写法，不可反过来判断。
*/
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;

/* 7.阻止默认事件 
前者是方法，是标准的写法，后者是属性，赋值false表示阻止，后者IE写法。
一般情况建议直接使用return false阻止，但和取消默认事件的含义是不同的。
*/
event.preventDefault ? event.preventDefault() : event.returnValue = false;

/* 8.事件监听
说明：标准浏览器的写法addEventListener()和IE的写法attachEvent()。
解决方法：判断addEventListener是否存在，如果存在则用，否则用IE8以下的版本（含IE8）的绑定方法attachEvent，
removeEventListener()和detachEvent()也是一样的用法。
addEventListener 第三个参数代表事件监听方式，只能是true和false。
true，采用capture(捕获模式:从外向内)；false，采用bubbling(冒泡模式：从内向外)。如无特殊要求，一般是false。
*/
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，传参的时候注意不要重复加了
    };
}

/* 9. 
为什么window.innerHeight和document.body.clientHeight的值会不一样呢？
其实原因是：滚动条！！！
你打开缩小窗口使得横纵都出现滚动条，会发现window.inner宽高总是比document.body.client宽高（firefox是document.documentElement.client宽高）
多一个固定值（这个和各个浏览器有关），比如是站也10px差距吧。
你把窗口拉大到滚动条消失（由于网页一般不止一屏那么长，所以纵向实验不好做，可以选百度或谷歌首页），再查询，会发现二者一致了。
所以呢你这innerHeight实际是比clientHeight多了个滚动条的height。
*/
var winW = document.body.clientWidth || document.docuemntElement.clientWidth;//网页可见区域宽
var winH = document.body.clientHeight || document.docuemntElement.clientHeight;//网页可见区域宽
//以上为不包括边框的宽高，如果是offsetWidth或者offsetHeight的话包括边框

/* 10 */
var winWW = document.body.scrollWidth || document.docuemntElement.scrollWidth;//整个网页的宽
var winHH = document.body.scrollHeight || document.docuemntElement.scrollHeight;//整个网页的高

var scrollHeight = document.body.scrollTop || document.docuemntElement.scrollTop;//网页被卷去的高
var scrollLeft = document.body.scrollLeft || document.docuemntElement.scrollLeft;//网页左卷的距离

var screenH = window.screen.height;//屏幕分辨率的高
var screenW = window.screen.width;//屏幕分辨率的宽
var screenX = window.screenLeft;//浏览器窗口相对于屏幕的x坐标（除了FireFox）
var screenXX = window.screenX;//FireFox相对于屏幕的X坐标
var screenY = window.screenTop;//浏览器窗口相对于屏幕的y坐标（除了FireFox）
var screenYY = window.screenY;//FireFox相对于屏幕的y坐标

/* 11.dom节点 */
var nextNode = obj.nextElementSibling ? obj.nextElementSibling : obj.nextSibling//获取下一个兄弟节点
var prevNode = obj.previousElementSibling ? obj.previousElementSibling : obj.previousSibling//获取上一个兄弟节点
var f_c_node = obj.firstElementChild ? obj.firstElementChild : obj.firstChild//获取第一个子节点
var l_c_node = obj.lastElementChild ? obj.lastElementChild : obj.lastChild//获取最后一个子节点

/* 12.通过类名获取元素 */
document.getElementsByClassName('');//IE 6 7 8不支持；
//第一个为全局获取类名，第二个为局部获取类名
function byClass1(oClass) {//全局获取，oClass为你想要查找的类名，没有“.”
    var tags = document.all ? document.all : document.getElementsByTagName('*');
    var arr = [];
    for (var i = 0; i < tags.length; i++) {
        var reg = new RegExp('\\b' + oClass + '\\b', 'g');
        if (reg.test(tags[i].className)) {
            arr.push(tags[i]);
        };
    };
    return arr;//注意返回的也是数组，包含你传入的class所有元素；
}
function byClass2(parentID, oClass) {//局部获取类名，parentID为你传入的父级ID
    var parent = document.getElementById(parentID);
    var tags = parent.all ? parent.all : parent.getElementsByTagName('*');
    var arr = [];
    for (var i = 0; i < tags.length; i++) {
        var reg = new RegExp('\\b' + oClass + '\\b', 'g');
        if (reg.test(tags[i].className)) {
            arr.push(tags[i]);
        };
    };
    return arr;//注意返回的也是数组，包含你传入的class所有元素；
}

/* 13.元素到浏览器边缘的距离(非兼容性问题)
https://www.cnblogs.com/xiaohuochai/p/5828369.html
offsetWidth表示元素在水平方向上占用的空间大小，无单位(以像素px计)
offsetWidth =  border-left-width + padding-left + width + padding-right + border-right-width; 
offsetParent：定位父级，表示与当前元素最近的经过定位(position不等于static)的父级元素，主要分为下列几种情况：
【1】元素自身有fixed定位，offsetParent的结果为null（[注意]firefox浏览器有兼容性问题，返回<body>）
【2】元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为<body>
【3】元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素
offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离
clientLeft的值就等于border-left的值
*/
function offsetTL(obj) {//获取元素内容距离浏览器边框的距离（含边框）
    var ofL = 0, ofT = 0;
    while (obj) {
        ofL += obj.offsetLeft + obj.clientLeft;//含边框
        ofT += obj.offsetTop + obj.clientTop;
        obj = obj.offsetParent;
    }
    return { left: ofL, top: ofT };
}

/* 14.关于event事件中的target */
document.onmouseover = function (e) {
    var e = e || window.event;
    var Target = e.target || e.srcElement;//获取target的兼容写法，后面的为IE
    var from = e.relatedTarget || e.formElement;//鼠标来的地方，同样后面的为IE...
    var to = e.relatedTarget || e.toElement;//鼠标去的地方
}

/* 15.鼠标滚轮事件 */
//火狐中的滚轮事件
document.addEventListener("DOMMouseScroll", function (event) {
    alert(event.detail);//若前滚的话为 -3，后滚的话为 3
}, false)
//非火狐中的滚轮事件
document.onmousewheel = function (event) {
    alert(event.detail);//前滚：120，后滚：-120
}

/* 16.火狐下特有的节点加载事件，就是节点加载完才执行，和onload不同 */
//感觉用到的不多，直接把js代码放在页面结构后面一样能实现。。
document.addEventListener('DOMContentLoaded', function () { }, false);//DOM加载完成。好像除IE6-8都可以.

1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
解决方案： css 里增加通配符 * { margin: 0; padding: 0; }

2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
解决方案：设置display:inline;

3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

4、图片默认有间距
解决方案：使用float 为img 布局

5、IE9一下浏览器不能使用opacity
解决方案：
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

7、cursor:hand 显示手型在safari 上不支持
解决方案：统一使用 cursor:pointer

8、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative

 

参考：

https://blog.csdn.net/wanmeiyinyue315/article/details/79654984

https://www.cnblogs.com/duenyang/p/6066737.html