原標(biāo)題：瀏覽器兼容性問題解決方案 · 總結(jié)
普及：瀏覽器的兼容性問題，往往是個(gè)別瀏覽器（沒錯，就是那個(gè)與眾不同的瀏覽器）對于一些標(biāo)準(zhǔn)的定義不一致導(dǎo)致的。俗話說：沒有IE就沒有傷害。
貼士：內(nèi)容都是自己總結(jié)的，不免會出現(xiàn)錯誤或者bug，歡迎更正和補(bǔ)充，本帖也會不斷更新。
網(wǎng)站建設(shè)Normalize.css
不同瀏覽器的默認(rèn)樣式存在差異，可以使用 Normalize.css 抹平這些差異。當(dāng)然，你也可以定制屬于自己業(yè)務(wù)的 reset.css
簡單粗暴法
網(wǎng)站建設(shè)html5shiv.js
解決 ie9 以下瀏覽器對 html5 新增標(biāo)簽不識別的問題。
網(wǎng)站設(shè)計(jì)respond.js
解決 ie9 以下瀏覽器不支持 CSS3 Media Query 的問題。
網(wǎng)站設(shè)計(jì)picturefill.js
解決 IE 9 10 11 等瀏覽器不支持 <picture> 標(biāo)簽的問題
網(wǎng)站制作IE 條件注釋
IE 的條件注釋僅僅針對IE瀏覽器，對其他瀏覽器無效
網(wǎng)站建設(shè)IE 屬性過濾器（較為常用的hack方法）
針對不同的 IE 瀏覽器，可以使用不同的字符來對特定的版本的 IE 瀏覽器進(jìn)行樣式控制
image
image
網(wǎng)站建設(shè)瀏覽器 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)一標(biāo)識語句
網(wǎng)站建設(shè)a 標(biāo)簽的幾種 CSS 狀態(tài)的順序
很多新人在寫 a 標(biāo)簽的樣式，會疑惑為什么寫的樣式?jīng)]有效果，或者點(diǎn)擊超鏈接后，hover、active 樣式?jīng)]有效果，其實(shí)只是寫的樣式被覆蓋了。
正確的a標(biāo)簽順序應(yīng)該是：==love hate==
網(wǎng)站建設(shè)完美解決 Placeholder
網(wǎng)站建設(shè)清除浮動 最佳實(shí)踐
做網(wǎng)站BFC 解決邊距重疊問題
當(dāng)相鄰元素都設(shè)置了 margin 邊距時(shí)，margin 將取最大值，舍棄小值。為了不讓邊距重疊，可以給子元素加一個(gè)父元素，并設(shè)置該父元素為 BFC：overflow: hidden;
-
<div class="box" id="box">
-
<p>Lorem ipsum dolor sit.</p>
-
<div "overflow: hidden;">
-
<p>Lorem ipsum dolor sit.</p>
-
</div> <p>Lorem ipsum dolor sit.</p>
-
</div>
做網(wǎng)站IE6 雙倍邊距的問題
設(shè)置 ie6 中設(shè)置浮動，同時(shí)又設(shè)置 margin，會出現(xiàn)雙倍邊距的問題
網(wǎng)站建設(shè)解決 IE9 以下瀏覽器不能使用 opacity
網(wǎng)站建設(shè)解決 IE6 不支持 fixed 絕對定位以及IE6 下被絕對定位的元素在滾動的時(shí)候會閃動的問題
-
/* 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');
-
}
網(wǎng)站建設(shè)IE6 背景閃爍的問題
問題：鏈接、按鈕用 CSSsprites 作為背景，在 ie6 下會有背景圖閃爍的現(xiàn)象。原因是 IE6 沒有將背景圖緩存，每次觸發(fā) hover 的時(shí)候都會重新加載
解決：可以用 JavaScript 設(shè)置 ie6 緩存這些圖片：
網(wǎng)站建設(shè)解決在 IE6 下，列表與日期錯位的問題
日期<span> 標(biāo)簽放在標(biāo)題 <a> 標(biāo)簽之前即可
網(wǎng)站建設(shè)解決 IE6 不支持 min-height 屬性的問題
網(wǎng)站建設(shè)讓 IE7 IE8 支持 CSS3 background-size屬性
由于 background-size 是 CSS3 新增的屬性，所以 IE 低版本自然就不支持了，但是老外寫了一個(gè) htc 文件，名叫 background-size polyfill，使用該文件能夠讓 IE7、IE8 支持 background-size 屬性。其原理是創(chuàng)建一個(gè) img 元素插入到容器中，并重新計(jì)算寬度、高度、left、top 等值，模擬 background-size 的效果。
-
html {
-
height: 100%;
-
}
-
body {
-
height: 100%;
-
margin: 0;
-
padding: 0;
-
background-image: url('img/37.png');
-
background-repeat: no-repeat;
-
background-size: cover;
-
-ms-behavior: url('css/backgroundsize.min.htc');
-
behavior: url('css/backgroundsize.min.htc');
-
}
網(wǎng)站建設(shè)IE6-7 line-height 失效的問題
問題：在ie 中 img 與文字放一起時(shí)，line-height 不起作用
解決：都設(shè)置成 float
width:100%
width:100% 這個(gè)東西在 ie 里用很方便，會向上逐層搜索 width 值，忽視浮動層的影響.
Firefox 下搜索至浮動層結(jié)束，如此，只能給中間的所有浮動層加 width:100%才行，累啊。
opera 這點(diǎn)倒學(xué)乖了，跟了 ie
cursor:hand
顯示手型 cursor: hand，ie6/7/8、opera 都支持，但是safari 、 ff 不支持
cursor: pointer;
td 自動換行的問題
問題：table 寬度固定，td 自動換行
解決：設(shè)置 Table 為 table-layout: fixed，td 為 word-wrap: break-word
網(wǎng)站建設(shè)兼容問題之讓層顯示在 FLASH 之上
想讓層的內(nèi)容顯示在 flash 上，把 FLASH 設(shè)置透明即可
網(wǎng)站建設(shè)之鍵盤事件 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)
-
}
網(wǎng)站制作IE兼容問題：求窗口大小的兼容寫法
-
// 瀏覽器窗口可視區(qū)域大?。ú话üぞ邫诤蜐L動條等邊線）
-
// 1600 * 525
-
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
-
var client_h = document.documentElement.clientHeight || document.body.clientHeight;
-
// 網(wǎng)頁內(nèi)容實(shí)際寬高（包括工具欄和滾動條等邊線）
-
// 1600 * 8
-
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
-
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;
-
// 網(wǎng)頁內(nèi)容實(shí)際寬高 (不包括工具欄和滾動條等邊線）
-
// 1600 * 8
-
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
-
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;
-
// 滾動的高度
-
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;
網(wǎng)站建設(shè)兼容問題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
-
}
-
});
-
},
-
// 取消默認(rèn)行為
-
preventDefault: function(event) {
-
if (event.preventDefault) {
-
event.preventDefault(); }
-
else {
-
event.returnValue = false;
-
}
-
},
-
// 阻止事件冒泡
-
stopPropagation: function(event) {
-
if (event.stopPropagation) {
-
event.stopPropagation();
-
}
-
else {
-
event.cancelBubble = true;
-
}
-
}
-
};
深圳網(wǎng)站建設(shè)博納網(wǎng)絡(luò)編輯整理。
