一：css
兼容性：页面在各个浏览器显示的不一样
双倍边矩：
解决：给浮动元素加display:inline;
清浮动：
解决：给浮动元素的父级加zoom:1;
margin负值：
解决：用position:relative
最小高度：
解决：用overflow:hidden;
透明度：
解决：
filter:alpha(opacity=20)
filter:alpha(opacity:20)
单像素:
解决：设置双像素
文字重影：
解决：background:none;
png透明图片：
解决：用Js
hack: 样式的前缀
_ IE6
* IE6,IE7
条件注释：
二：JS
获取非行间样式：
get Computed Style(obj,false).width；存在兼容性问题;兼容chrome 、FF、ie9+；
obj.currentStyle.width:兼容IE系列;
DOM 不兼容问题：
|| 取值：从左往右,取为真的那个值，
子元素:
父级.children:父级下面的子元素;
父元素:
obj.parentNode:获取元素的父级;
下一个兄弟节点[不兼容]:
兼容性问题解决方案:
var oNext = obj.nextElementSibling || obj.nextSibling;
obj.nextSibling:
所有的浏览器都支持这个方法,只不过高版本浏览器[IE9+]中会识别文本节点[普通文字,空格,空行]; 低版本里面就是元素节点[li,p,span···],
obj.nextElementSibling:
高版本浏览器兼容;不兼容IE8--;如果低版本浏览器不识别的话会报错undefined;undeifned就是false;
|| 或运算符从左往右只看一个条件,这个条件如果为真,就不会再接着看后面的了,如果为假,就继续选择后面的条件.
上一个兄弟节点[不兼容]:
兼容性问题解决方案:
var oPrev = obj.previousElementSibling || obj.previousSibling;
obj.previousSibling:
所有的浏览器都支持这个方法,只不过高版本浏览器[IE9+]中会识别文本节点[普通文字,空格,空行]; 低版本里面就是元素节点[li,p,span···],
obj.previousElementSibling:
高版本浏览器兼容;不兼容IE8--;如果低版本浏览器不识别的话会报错undefined;undeifned就是false;
父级下的第一个子元素[不兼容]:
兼容性问题解决方法:
父级.firstElementChild || 父级.firstChild;
父级.firstElementChild:
所有的浏览器都支持这个方法,只不过高版本浏览器[IE9+]中会识别文本节点[普通文字,空格,空行]; 低版本里面就是元素节点[li,p,span···],
父级.firstChild:
高版本浏览器兼容;不兼容IE8--;如果低版本浏览器不识别的话会报错undefined;undeifned就是false;
父级下的最后一个子元素[不兼容]:
兼容性问题解决方法:
父级.lastElementChild || 父级.lastChild;
父级.lastElementChild:
所有的浏览器都支持这个方法,只不过高版本浏览器[IE9+]中会识别文本节点[普通文字,空格,空行]; 低版本里面就是元素节点[li,p,span···],
父级.lastChild:
高版本浏览器兼容;不兼容IE8--;如果低版本浏览器不识别的话会报错undefined;undeifned就是false;
滚动距离兼容性问题：
window.onscroll:滚动滚动条的时候触发;
滚动距离：
横向：
document.body.scrollLeft//不兼容IE和FF；
document.documentElement.scrollLeft//兼容IE和FF，chrome是0；
兼容性问题：
纵向：
document.body.scrollTop；只兼容chrome,其他的都是0；
document.documentElement.scrollTop;//兼容IE和FF；chrome是0；
兼容性问题：
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
事件对象兼容性问题：
事件对象：
event:描述或者包含事件的更加详细的信息;
event:不兼容FF;
ev: 兼容IE9+,FF,Chrome,IE8--报undefined;
clientX:X轴的坐标
clientY:Y轴的坐标
事件绑定兼容性问题：
事件绑定：语法规则：
obj.addEventListener(事件名,函数名,是否捕获);//false
关于三个参数：
事件名不加on
函数名不加()；
false;
obj.addEventListener:兼容IE9+,chrome,FF;
IE:
attachEvent(事件名,函数名);
关于两个参数：
事件名必须加on,
函数名不加();
事件解除绑定：
obj.removeEventListener(事件名,函数名,是否捕获);
obj.removeEventListener:兼容IE9+,chrome,FF;
IE:
obj.detachEvent(事件名,函数名);
鼠标滚轮事件兼容性问题：
鼠标滚轮事件：
obj.onmousewheel:兼容IE系列和chrome;
DOMMouseScroll:火狐下使用;
addEventListener('DOMMouseScroll',fn,false);//火狐滚动轮事件，要用事件绑定来实现。
滚动方向：
oEvent.wheelDelta//
chrome&&IE： 在火狐下undefined;
上： 120；
下： -120；
火狐下：oEvent.detail:
上：-3；
下： 3；
oninput兼容性问题：
oninput:统计输入框文字变化；不兼容IE8--；
onchange:当值发生变化的时候触发,必须失去焦点才触发；
onpropertychange:不兼容IE11和IE9,IE9删除不好使;
window.onload:
页面加载完成： html div+css,js,文字,图片·····
页面加载最耗性能和资源的就是图片;
DOMContentLoaded:用事件绑定的方法添加；
事件委托兼容性问题：
事件委托：[把事件加给父级]不一定非得是直接父级;
事件源：事假的源头;
oEvent.target;//IE8--undefined;
oEvent.srcElement;//不兼容FF--undefined;
事件委托的好处：
1>.性能高;
2>.可以给未来的元素添加事件;
oEvent.toElement;//移动到那里去，也就是目标点;
不兼容FF，报undefined;
oEvent.relatedTarget;:
不兼容IE8--，报undefined;
obj里面是否包含我们要查找的元素：
obj.contains(元素)//包含的话返回true,不包含返回false;
网友评论