瀏覽器兼容性問(wèn)題解決方案 · 總結(jié)

javascript/jquery

瀏覽數(shù):536

2017-9-2

普及：瀏覽器的兼容性問(wèn)題，往往是個(gè)別瀏覽器（沒(méi)錯(cuò)，就是那個(gè)與眾不同的瀏覽器）對(duì)于一些標(biāo)準(zhǔn)的定義不一致導(dǎo)致的。俗話(huà)說(shuō)：沒(méi)有IE就沒(méi)有傷害。

貼士：內(nèi)容都是自己總結(jié)的，不免會(huì)出現(xiàn)錯(cuò)誤或者bug，歡迎更正和補(bǔ)充，本帖也會(huì)不斷更新。

Normalize.css

不同瀏覽器的默認(rèn)樣式存在差異，可以使用 Normalize.css 抹平這些差異。當(dāng)然，你也可以定制屬于自己業(yè)務(wù)的 reset.css

<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">

簡(jiǎn)單粗暴法

* { margin: 0; padding: 0; }

html5shiv.js

解決 ie9 以下瀏覽器對(duì) html5 新增標(biāo)簽不識(shí)別的問(wèn)題。

<!--[if lt IE 9]> ??<script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->

respond.js

解決 ie9 以下瀏覽器不支持 CSS3 Media Query 的問(wèn)題。

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

picturefill.js

解決 IE 9 10 11 等瀏覽器不支持 <picture> 標(biāo)簽的問(wèn)題

<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js"></script>

IE 條件注釋

IE 的條件注釋僅僅針對(duì)IE瀏覽器，對(duì)其他瀏覽器無(wú)效

IE 屬性過(guò)濾器（較為常用的hack方法）

針對(duì)不同的 IE 瀏覽器，可以使用不同的字符來(lái)對(duì)特定的版本的 IE 瀏覽器進(jìn)行樣式控制

瀏覽器 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)識(shí)語(yǔ)句

a 標(biāo)簽的幾種 CSS 狀態(tài)的順序

很多新人在寫(xiě) a 標(biāo)簽的樣式，會(huì)疑惑為什么寫(xiě)的樣式?jīng)]有效果，或者點(diǎn)擊超鏈接后，hover、active 樣式?jīng)]有效果，其實(shí)只是寫(xiě)的樣式被覆蓋了。

正確的a標(biāo)簽順序應(yīng)該是：==love hate==

• link:平常的狀態(tài)
• visited:被訪(fǎng)問(wèn)過(guò)之后
• hover:鼠標(biāo)放到鏈接上的時(shí)候
• active:鏈接被按下的時(shí)候

完美解決 Placeholder

<input type="text" value="Name *" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name *';}">

清除浮動(dòng) 最佳實(shí)踐

.fl { float: left; } .fr { float: right; } .clearfix:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; } .clearfix { zoom: 1; }

BFC 解決邊距重疊問(wèn)題

當(dāng)相鄰元素都設(shè)置了 margin 邊距時(shí)，margin 將取最大值，舍棄小值。為了不讓邊距重疊，可以給子元素加一個(gè)父元素，并設(shè)置該父元素為 BFC：overflow: hidden;

<div class="box" id="box"> ??<p>Lorem ipsum dolor sit.</p> ??<div style="overflow: hidden;"> ????<p>Lorem ipsum dolor sit.</p> ??</div> ??<p>Lorem ipsum dolor sit.</p> </div>

IE6 雙倍邊距的問(wèn)題

設(shè)置 ie6 中設(shè)置浮動(dòng)，同時(shí)又設(shè)置 margin，會(huì)出現(xiàn)雙倍邊距的問(wèn)題

display: inline;

解決 IE9 以下瀏覽器不能使用 opacity

opacity: 0.5; filter: alpha(opacity = 50); filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

解決 IE6 不支持 fixed 絕對(duì)定位以及IE6下被絕對(duì)定位的元素在滾動(dòng)的時(shí)候會(huì)閃動(dòng)的問(wèn)題

/* 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 背景閃爍的問(wèn)題

問(wèn)題：鏈接、按鈕用 CSSsprites 作為背景，在 ie6 下會(huì)有背景圖閃爍的現(xiàn)象。原因是 IE6 沒(méi)有將背景圖緩存，每次觸發(fā) hover 的時(shí)候都會(huì)重新加載

解決：可以用 JavaScript 設(shè)置 ie6 緩存這些圖片：

document.execCommand("BackgroundImageCache", false, true);

解決在 IE6 下，列表與日期錯(cuò)位的問(wèn)題

日期<span> 標(biāo)簽放在標(biāo)題 <a> 標(biāo)簽之前即可

解決 IE6 不支持 min-height 屬性的問(wèn)題

min-height: 350px; _height: 350px;

讓 IE7 IE8 支持 CSS3 background-size屬性

由于 background-size 是 CSS3 新增的屬性，所以 IE 低版本自然就不支持了，但是老外寫(xiě)了一個(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'); }

IE6-7 line-height 失效的問(wèn)題

問(wèn)題：在ie 中 img 與文字放一起時(shí)，line-height 不起作用

解決：都設(shè)置成 float

width:100%

width:100% 這個(gè)東西在 ie 里用很方便，會(huì)向上逐層搜索 width 值，忽視浮動(dòng)層的影響.

Firefox 下搜索至浮動(dòng)層結(jié)束，如此，只能給中間的所有浮動(dòng)層加 width:100%才行，累啊。

opera 這點(diǎn)倒學(xué)乖了，跟了 ie

cursor:hand

顯示手型 cursor: hand，ie6/7/8、opera 都支持，但是safari 、 ff 不支持

cursor: pointer;

td 自動(dòng)換行的問(wèn)題

問(wèn)題：table 寬度固定，td 自動(dòng)換行

解決：設(shè)置 Table 為 table-layout: fixed，td 為 word-wrap: break-word

讓層顯示在 FLASH 之上

想讓層的內(nèi)容顯示在 flash 上，把 FLASH 設(shè)置透明即可

1、<param name=" wmode " value="transparent"> 2、<param name="wmode" value="opaque">

鍵盤(pán)事件 keyCode 兼容性寫(xiě)法

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) }

求窗口大小的兼容寫(xiě)法

// 瀏覽器窗口可視區(qū)域大小（不包括工具欄和滾動(dòng)條等邊線(xiàn)） // 1600 * 525 var client_w = document.documentElement.clientWidth || document.body.clientWidth; var client_h = document.documentElement.clientHeight || document.body.clientHeight; // 網(wǎng)頁(yè)內(nèi)容實(shí)際寬高（包括工具欄和滾動(dòng)條等邊線(xiàn)） // 1600 * 8 var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth; var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight; // 網(wǎng)頁(yè)內(nèi)容實(shí)際寬高 (不包括工具欄和滾動(dòng)條等邊線(xiàn)） // 1600 * 8 var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth; var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight; // 滾動(dòng)的高度 var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;

DOM 事件處理程序的兼容寫(xiě)法（能力檢測(cè)）

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; ????????} ????} };

原文鏈接:https://juejin.im/post/59a3f2fe6fb9a0249471cbb4

總結(jié)

以上是生活随笔為你收集整理的浏览器兼容性问题解决方案· 总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。