Css兼容問題
- 樣式在各瀏覽器中解析不一致的情況睹逃，或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS bug.
- CSS Hack: CSS中寒匙，Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法旋恼，修補bug的方法
- Filter:表示過濾器的意思拓轻，它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規(guī)則或聲明的方法。本質(zhì)上講始藕，F(xiàn)ilter是hack方法中的一種女淑；
IE6常見CSS解析Bug及hack（解決方法）
1.默認高度（IE6）
描述：在IE6及以下版本中，部分塊元素擁有默認高度（低于18px高度）
hack1:給元素添加聲明：font-size:0;
hack2：給元素添加聲明：overflow:hidden;
2.圖片間隙
div中的圖片間隙
bug：在塊元素中插入圖塊狀元素片時辜御，有時圖片會將塊元素下方撐大三像素鸭你。
Hack：將<img>轉(zhuǎn)為，給<img>添加聲明：display:block;
3.雙倍浮向（雙倍邊距）
描述：當Ie6及更低版本瀏覽器在解析浮動元素時擒权，會錯誤地把浮向邊的邊界加倍顯示袱巨。
hack:給浮動元素添加聲明：display:inline;
4.表單元素行高不一致(IE,MOZ,C,O,S)
bug：表單元素行高對齊方式不一致
hack:給表單元素添加聲明：float:left;
5.按鈕元素默認大小及樣式不一 致
hack1： 統(tǒng)一大小及樣式/（用a標記模擬）
hack2:如果這個按鈕是一個圖片，直接把圖片作為按鈕的背景圖即可碳抄。
6.百分比bug
描述：在IE6及以下版本中在解析百分比時愉老，會按四舍五入方式計算從而導致50%加50%大于100%的情況。
hack:給右面的浮動元素添加聲明：clear:right; 意思：清除右浮動剖效。
clear:left:清除左浮動
clear:both:清除兩邊的浮動
7.鼠標指針bug
描述：cursor屬性的hand屬性值只有IE8瀏覽器識別;
hack:如統(tǒng)一某元素鼠標指針形狀為手型嫉入，應添加聲明：cursor:pointer;
- auto默認
- crosshair加號
- text文本
- wait等待
- help幫助
- progress過程
- inherit繼承
- move移動
- ne-resize向上或向右移動
- pointer手形
8.透明屬性
IE瀏覽器寫法：filter:alpha(opacity=數(shù)值);取值范圍 1-100(IE8以下)
兼容其他瀏覽器寫法：opacity:數(shù)值;(數(shù)值的取值范圍0-1,0.1,0.2,0.3-----0.9)
9.當li里的A加display:block或float:left時，出現(xiàn)行高不一致璧尸，有的會多出3像素
hack1：給a加display：inline-block咒林；
hack2：給a加display：inline;
Hack3：給li加float，并加寬度爷光；
10.當li加float屬性垫竞，并且li里的A轉(zhuǎn)換成塊元素,并給a加了高度時，IE6里會出現(xiàn)每個LI單獨占一行或階梯狀的情況
hack1：不給a標簽加高度蛀序；
Hack2：給a標簽也添加float欢瞪；
11.父元素里有塊元素活烙，如果給子元素添加添加margin-top,父元素會下來
Hack1：給父元素添加overflow：hidden；
Hack2：給子元素添加float遣鼓；
Hack3：給父元素加邊框啸盏；
或者用其他的方法達到我們想要的效果：如給父元素加padding-top.
12.Fliter（過濾器）方法兼容瀏覽器
- _下劃線：IE6瀏覽器的兼容符號； （只有IE6瀏覽器識別此符號譬正，其他瀏覽器不識別）
語法：選擇器｛_屬性：屬性值宫补；｝
- *或+：兼容所有IE7以下瀏覽器；（只有IE7及以下版本瀏覽器識別此符號曾我，其他瀏覽器不識別）
語法：選擇器｛*屬性：屬性值; +屬性：屬性值; ｝
- \0：IE8及以上瀏覽器的兼容符號粉怕；
語法：選擇器｛屬性：屬性值\0;｝
- \9：兼容所有IE瀏覽器；
語法：選擇器｛屬性：屬性值\9｝（只有IE瀏覽器識別此符號抒巢，其他瀏覽器不識別）
js兼容問題
1.各瀏覽器下 scrollTop的差異
IE6/7/8：
對于沒有doctype聲明的頁面里可以使用 document.body.scrollTop 來獲取 scrollTop高度 贫贝；
對于有doctype聲明的頁面則可以使用 document.documentElement.scrollTop；
Safari:
safari 比較特別蛉谜，有自己獲取scrollTop的函數(shù) ： window.pageYOffset 稚晚；
Firefox:
火狐等等相對標準些的瀏覽器就省心多了，直接用 document.documentElement.scrollTop 型诚；
*完美的獲取scrollTop 賦值短語 ：
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;*
2.關于使用 firstChild,lastChild 等客燕，獲取第一個/最后一個元素節(jié)點時產(chǎn)生的問題
--IE6-8下: firstChild,lastChild,nextSibling,previousSibling,獲取第一個元素節(jié)點
--高版本瀏覽器下: firstElementChild,lastElementChild,nextElementSibling,previousElementSibling
var firstChild = oBox.firstChild || oBox.firstElementChild;
3.**獲取樣式 currentStyle 和 getComputedStyle **
IE: currentStyle
Chrome: getComputedStyle
function getStyle(obj,attr){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[attr];
}
return obj.currentStyle[attr];
}
4.事件對象
ie低版本：window.event
var evt = e || window.event;
5.獲取事件源
ie : event.srcElement
firefox : event.target
var _target = evt.target || evt.srcElement;
6.添加事件監(jiān)聽器attachEvent/attachEventLister
IE8以下用: attachEvent
Chrome,IE9-10用: attachEventLister
//添加事件
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else{
obj.attachEvent("on"+type,fn);
}
}
//移除事件
function removeClass(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn)
}else{
obj.detachEvent("on"+type,fn);
}
}
7.document.getElementByClassName()：根據(jù)類名查找元素，返回集合（IE9及以上版本支持）
function getByClassName(className, context) {
context = context || document;
if (document.getElementsByClassName) // 瀏覽器支持使用 getElementsByClassName
return context.getElementsByClassName(className);
/* 不支持使用 getElementsByClassName */
// 保存查找到的元素的數(shù)組
var result = [];
// 查找 context 后代的所有元素
var allTags = context.getElementsByTagName("*");
// 遍歷所有的元素
for(var i = 0, len = allTags.length; i < len; i++) {
// 獲取當前遍歷元素使用的所有 class 類名
var classNames = allTags[i].className.split(" ");
// 遍歷當前元素的所有類名狰贯，和待查找的類名比較
for (var j = 0, l = classNames.length; j < l; j++) {
if (classNames[j] == className) { // 當前所在遍歷的元素是要查找出來的其中一個
result.push(allTags[i]);
break;
}
}
}
// 返回查找結(jié)果
return result;
}
8.阻止事件冒泡
stopPropagation()和cancelBubble也搓，前者是方法，是標準的寫法涵紊，后者是屬性傍妒，賦值true表示阻止，是IE的寫法摸柄。
if(evt.stopPropagation){
evt.stopPropagation();
}else{
evt.cancelBubble = true;
}
9.阻止默認行為兼容
ie : returnValue
其他瀏覽器：preventDefault
event.preventDefault?event.preventDefault():event.returnValue=false;
或者直接在事件處理程序中return false;
10.獲取用戶按下的鍵值
console.log(evt.keyCode || evt.which);
