一：css
兼容性：頁(yè)面在各個(gè)瀏覽器顯示的不一樣
雙倍邊矩：
解決：給浮動(dòng)元素加display:inline;
清浮動(dòng)：
解決：給浮動(dòng)元素的父級(jí)加zoom:1;
margin負(fù)值：
解決：用position:relative
最小高度：
解決：用overflow:hidden;
透明度：
解決：
filter:alpha(opacity=20)
filter:alpha(opacity:20)
單像素:
解決：設(shè)置雙像素
文字重影：
解決：background:none;
png透明圖片：
解決：用Js
hack: 樣式的前綴
_ IE6
* IE6,IE7
條件注釋?zhuān)?br>
二：JS
獲取非行間樣式：
get Computed Style(obj,false).width蓬痒；存在兼容性問(wèn)題;兼容chrome 狱掂、FF趋惨、ie9+器虾；
obj.currentStyle.width:兼容IE系列;
DOM 不兼容問(wèn)題：
|| 取值：從左往右,取為真的那個(gè)值兆沙，
子元素:
父級(jí).children:父級(jí)下面的子元素;
父元素:
obj.parentNode:獲取元素的父級(jí);
下一個(gè)兄弟節(jié)點(diǎn)[不兼容]:
兼容性問(wèn)題解決方案:
var oNext = obj.nextElementSibling || obj.nextSibling;
obj.nextSibling:
所有的瀏覽器都支持這個(gè)方法,只不過(guò)高版本瀏覽器[IE9+]中會(huì)識(shí)別文本節(jié)點(diǎn)[普通文字,空格,空行]; 低版本里面就是元素節(jié)點(diǎn)[li,p,span···],
obj.nextElementSibling:
高版本瀏覽器兼容;不兼容IE8--;如果低版本瀏覽器不識(shí)別的話(huà)會(huì)報(bào)錯(cuò)undefined;undeifned就是false;
|| 或運(yùn)算符從左往右只看一個(gè)條件,這個(gè)條件如果為真,就不會(huì)再接著看后面的了,如果為假,就繼續(xù)選擇后面的條件.
上一個(gè)兄弟節(jié)點(diǎn)[不兼容]:
兼容性問(wèn)題解決方案:
var oPrev = obj.previousElementSibling || obj.previousSibling;
obj.previousSibling:
所有的瀏覽器都支持這個(gè)方法,只不過(guò)高版本瀏覽器[IE9+]中會(huì)識(shí)別文本節(jié)點(diǎn)[普通文字,空格,空行]; 低版本里面就是元素節(jié)點(diǎn)[li,p,span···],
obj.previousElementSibling:
高版本瀏覽器兼容;不兼容IE8--;如果低版本瀏覽器不識(shí)別的話(huà)會(huì)報(bào)錯(cuò)undefined;undeifned就是false;
父級(jí)下的第一個(gè)子元素[不兼容]:
兼容性問(wèn)題解決方法:
父級(jí).firstElementChild || 父級(jí).firstChild;
父級(jí).firstElementChild:
所有的瀏覽器都支持這個(gè)方法,只不過(guò)高版本瀏覽器[IE9+]中會(huì)識(shí)別文本節(jié)點(diǎn)[普通文字,空格,空行]; 低版本里面就是元素節(jié)點(diǎn)[li,p,span···],
父級(jí).firstChild:
高版本瀏覽器兼容;不兼容IE8--;如果低版本瀏覽器不識(shí)別的話(huà)會(huì)報(bào)錯(cuò)undefined;undeifned就是false;
父級(jí)下的最后一個(gè)子元素[不兼容]:
兼容性問(wèn)題解決方法:
父級(jí).lastElementChild || 父級(jí).lastChild;
父級(jí).lastElementChild:
所有的瀏覽器都支持這個(gè)方法,只不過(guò)高版本瀏覽器[IE9+]中會(huì)識(shí)別文本節(jié)點(diǎn)[普通文字,空格,空行]; 低版本里面就是元素節(jié)點(diǎn)[li,p,span···],
父級(jí).lastChild:
高版本瀏覽器兼容;不兼容IE8--;如果低版本瀏覽器不識(shí)別的話(huà)會(huì)報(bào)錯(cuò)undefined;undeifned就是false;
滾動(dòng)距離兼容性問(wèn)題：
window.onscroll:滾動(dòng)滾動(dòng)條的時(shí)候觸發(fā);
滾動(dòng)距離：
橫向：
document.body.scrollLeft//不兼容IE和FF库正；
document.documentElement.scrollLeft//兼容IE和FF，chrome是0洞渤；
兼容性問(wèn)題：
縱向：
document.body.scrollTop；只兼容chrome,其他的都是0抡蛙；
document.documentElement.scrollTop;//兼容IE和FF粗截；chrome是0熊昌；
兼容性問(wèn)題：
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
事件對(duì)象兼容性問(wèn)題：
事件對(duì)象：
event:描述或者包含事件的更加詳細(xì)的信息;
event:不兼容FF;
ev: 兼容IE9+,FF,Chrome,IE8--報(bào)undefined;
clientX:X軸的坐標(biāo)
clientY:Y軸的坐標(biāo)
事件綁定兼容性問(wèn)題：
事件綁定：語(yǔ)法規(guī)則：
obj.addEventListener(事件名,函數(shù)名,是否捕獲);//false
關(guān)于三個(gè)參數(shù)：
事件名不加on
函數(shù)名不加()；
false;
obj.addEventListener:兼容IE9+,chrome,FF;
IE:
attachEvent(事件名,函數(shù)名);
關(guān)于兩個(gè)參數(shù)：
事件名必須加on,
函數(shù)名不加();
事件解除綁定：
obj.removeEventListener(事件名,函數(shù)名,是否捕獲);
obj.removeEventListener:兼容IE9+,chrome,FF;
IE:
obj.detachEvent(事件名,函數(shù)名);
鼠標(biāo)滾輪事件兼容性問(wèn)題：
鼠標(biāo)滾輪事件：
obj.onmousewheel:兼容IE系列和chrome;
DOMMouseScroll:火狐下使用;
addEventListener('DOMMouseScroll',fn,false);//火狐滾動(dòng)輪事件昂利，要用事件綁定來(lái)實(shí)現(xiàn)蜂奸。
滾動(dòng)方向：
oEvent.wheelDelta//
chrome&&IE： 在火狐下undefined;
上： 120扩所；
下： -120祖屏；
火狐下：oEvent.detail:
上：-3赐劣；
下： 3魁兼；
oninput兼容性問(wèn)題：
oninput:統(tǒng)計(jì)輸入框文字變化盖呼；不兼容IE8--几晤；
onchange:當(dāng)值發(fā)生變化的時(shí)候觸發(fā),必須失去焦點(diǎn)才觸發(fā)蟹瘾；
onpropertychange:不兼容IE11和IE9,IE9刪除不好使;
window.onload:
頁(yè)面加載完成： html div+css,js,文字,圖片·····
頁(yè)面加載最耗性能和資源的就是圖片;
DOMContentLoaded:用事件綁定的方法添加憾朴；
事件委托兼容性問(wèn)題：
事件委托：[把事件加給父級(jí)]不一定非得是直接父級(jí);
事件源：事假的源頭;
oEvent.target;//IE8--undefined;
oEvent.srcElement;//不兼容FF--undefined;
事件委托的好處：
1>.性能高;
2>.可以給未來(lái)的元素添加事件;
oEvent.toElement;//移動(dòng)到那里去，也就是目標(biāo)點(diǎn);
不兼容FF做祝，報(bào)undefined;
oEvent.relatedTarget;:
不兼容IE8--编兄，報(bào)undefined;
obj里面是否包含我們要查找的元素：
obj.contains(元素)//包含的話(huà)返回true,不包含返回false;