image.png
瀏覽器兼容性問題解決方案 · 總結
一缰雇、IE 屬性過濾器（較為常用的hack方法）
針對不同的 IE 瀏覽器弃秆，可以使用不同的字符來對特定的版本的 IE 瀏覽器進行樣式控制
image.png
image.png
二嫉拐、瀏覽器 CSS 兼容前綴
-o-transform:rotate(7deg); // Opera
-ms-transform:rotate(7deg); // IE
-moz-transform:rotate(7deg); // Firefox
-webkit-transform:rotate(7deg); // Chrome
transform:rotate(7deg); // 統(tǒng)一標識語句
三咐低、a 標簽的幾種 CSS 狀態(tài)的順序
很多新人在寫 a 標簽的樣式其骄，會疑惑為什么寫的樣式沒有效果辐烂，或者點擊超鏈接后虎囚，hover调煎、active 樣式沒有效果横缔，其實只是寫的樣式被覆蓋了铺遂。
正確的a標簽順序應該是：
- link:平常的狀態(tài)
- visited:被訪問過之后
- hover:鼠標放到鏈接上的時候
- active:鏈接被按下的時候
四、IE6 雙倍邊距的問題
設置 ie6 中設置浮動茎刚，同時又設置 margin襟锐，會出現(xiàn)雙倍邊距的問題
display: inline;
五、解決 IE9 以下瀏覽器不能使用 opacity
opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
六膛锭、解決 IE6 不支持 fixed 絕對定位以及IE6下被絕對定位的元素在滾動的時候會閃動的問題
/* IE6 hack */
*html, *html body {
background-image: url(about:blank);
background-attachment: fixed;
}
*html #menu {
position: absolute;
top: expression(((e=document.documentElement.scrollTop) ? e : document.body.scrollTop) + 100 + 'px');
}
七粮坞、IE6 背景閃爍的問題
問題：鏈接、按鈕用 CSSsprites 作為背景泉沾，在 ie6 下會有背景圖閃爍的現(xiàn)象捞蚂。原因是 IE6 沒有將背景圖緩存，每次觸發(fā) hover 的時候都會重新加載
解決：可以用 JavaScript 設置 ie6 緩存這些圖片：
document.execCommand("BackgroundImageCache", false, true);
八跷究、解決 IE6 不支持 min-height 屬性的問題
min-height: 350px;
_height: 350px;
八姓迅、鍵盤事件 keyCode 兼容性寫法
var inp = document.getElementById('inp')
var result = document.getElementById('result')
function getKeyCode(e) {
e = e ? e : (window.event ? window.event : "")
return e.keyCode ? e.keyCode : e.which
}
inp.onkeypress = function(e) {
result.innerHTML = getKeyCode(e)
}
九、DOM 事件處理程序的兼容寫法（能力檢測）
var eventshiv = {
// event兼容
getEvent: function(event) {
return event ? event : window.event;
},
// type兼容
getType: function(event) {
return event.type;
},
// target兼容
getTarget: function(event) {
return event.target ? event.target : event.srcelem;
},
// 添加事件句柄
addHandler: function(elem, type, listener) {
if (elem.addEventListener) {
elem.addEventListener(type, listener, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + type, listener);
} else {
// 在這里由于.與'on'字符串不能鏈接，只能用 []
elem['on' + type] = listener;
}
},
// 移除事件句柄
removeHandler: function(elem, type, listener) {
if (elem.removeEventListener) {
elem.removeEventListener(type, listener, false);
} else if (elem.detachEvent) {
elem.detachEvent('on' + type, listener);
} else {
elem['on' + type] = null;
}
},
// 添加事件代理
addAgent: function (elem, type, agent, listener) {
elem.addEventListener(type, function (e) {
if (e.target.matches(agent)) {
listener.call(e.target, e); // this 指向 e.target
}
});
},
// 取消默認行為
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 阻止事件冒泡
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
原文鏈接：https://juejin.im/post/59a3f2fe6fb9a0249471cbb4丁存，里面介紹了比較全的兼容性問題肩杈，本人只是拿出了一些開發(fā)中常用的問題！
