前言

這些天看了一下自己剛進(jìn)入掘金平臺時寫的一些文章，展現(xiàn)和訪問量都不怎么高，所以決定接下來一段時間內(nèi)將對某些文章進(jìn)行重寫，以確保產(chǎn)出的文章沒有水文， 拒絕水文從我做起。

今天就來聊聊在為了您更好的體驗，本文章聊聊如何僅支持谷歌瀏覽器訪問查看頁面？這篇文章中提到的瀏覽器兼容問題，以此篇文章來證明自己并非不了解瀏覽器兼容性問題，而是當(dāng)時其他因素導(dǎo)致選擇了 一刀切的方法來處理需求（我就是一個不粘鍋）。

嘿，掘友們~既然點進(jìn)來了，不妨就繼續(xù)看下去吧^_^

思考概念

所謂的 瀏覽器兼容性問題，是 指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。

上面的定義就是大白話，我們來看看來自百度百科的權(quán)威解釋： 瀏覽器兼容性問題又被稱為網(wǎng)頁兼容性或網(wǎng)站兼容性問題，指網(wǎng)頁在各種瀏覽器上的顯示效果可能不一致而產(chǎn)生瀏覽器和網(wǎng)頁間的兼容問題。在網(wǎng)站的設(shè)計和制作中，做好瀏覽器兼容，才能夠讓網(wǎng)站在不同的瀏覽器下都正常顯示。而對于瀏覽器軟件的開發(fā)和設(shè)計，瀏覽器對標(biāo)準(zhǔn)的更好兼容能夠給用戶更好的使用體驗。

產(chǎn)生的原因

造成瀏覽器兼容性問題的根本原因就是 各瀏覽器使用了不同的內(nèi)核，并且它們處理同一件事情的時候思路不同。

怎么理解上述文字？即： 不同瀏覽器使用的內(nèi)核及所支持的HTML等網(wǎng)頁語言標(biāo)準(zhǔn)不同，以及用戶客戶端的環(huán)境不同（如分辨率不同）造成了顯示效果不能達(dá)到理想效果。

解決方法

前端開發(fā)經(jīng)常需要檢查瀏覽器的兼容性，這里推薦(Can I Use)這個查詢網(wǎng)站。它是一個針對前端開發(fā)人員定制的一個查詢CSS、JS、HTML5、SVG在主流瀏覽器中特性和兼容性的網(wǎng)站，可以很好的保證網(wǎng)頁在瀏覽器中的兼容性。有了這個工具我們就可以快速的了解到代碼在各個瀏覽器中的兼容情況了，強烈推薦一波，大家趕緊去體驗吧?！界面效果如下圖所示：

工具只能給我們顯示查詢的特性在不同瀏覽器上的兼容情況，至于如何解決兼容問題還得看下述的解決辦法→

CSS兼容問題

1、不同瀏覽器的標(biāo)簽?zāi)J(rèn)的內(nèi)外邊距不同

解決方案：*{margin: 0; padding: 0;}

其實清除瀏覽器自帶的默認(rèn)樣式，每個前端開發(fā)者所用的方法大同小異，這里給出我選用的清除默認(rèn)樣式的重置樣式代碼：

/** * 該文件用于清除瀏覽器樣式 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, , pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, , form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, , footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { padding:0; margin:0; border:0; outline: 0; font-family: " Neue For Number", -apple-system, , "Segoe UI", Roboto, " SC", " Sans GB", " YaHei", " Neue", , Arial, sans-serif; word-wrap:break-word; } html, body { width: 100%; height: 100%; } a{ text-: none; -webkit-tap--color:rgba(255,255,255,0); } ul,ol{ list-style-type: none; } { resize: none; } /*去除input button默認(rèn)樣式*/ input,button, { -webkit-: none; -webkit-tap--color: rgba(255, 225, 225, 0); padding: 0; border: 0; outline: 0; } // 修改屬性默認(rèn)文字顏色 input::-webkit-input-, ::-webkit-input- { /* WebKit */ color: #999; } input:-moz-, :-moz- { /* Mozilla Firefox 4 to 18 */ color: #999; } input::-moz-, ::-moz- { /* Mozilla Firefox 19+ */ color: #999; } input:-ms-input-, :-ms-input- { /* 10+ */ color: #999; }

除了自己定義清除默認(rèn)樣式的代碼，也可選擇引用別人寫好的成熟插件.css來清除默認(rèn)樣式；

2、圖片加a標(biāo)簽在IE9中會有邊框

解決方案：img{border: none;}

3、IE6及更低版本浮動元素，浮動邊雙倍邊距

解決方案：不使用margin ，使用 padding

4、IE6及更低版本中，部分塊元素?fù)碛心J(rèn)高度

解決方案：給元素設(shè)置font-size: 0;

5、a標(biāo)簽藍(lán)色邊框

解決方案：a{outline: none;}

6、IE6不支持min-height屬性

解決方案：{min-height: 200px; _height: 350px;}

7、IE9以下瀏覽器不能使用opacity

解決方案：Firefox/Chrome/Safari/Opera瀏覽器使用opacity；IE瀏覽器使用filter

opacity: 0.7; /*FF chrome safari opera*/ filter: alpha(opacity:70); /*用了ie濾鏡,可以兼容ie*/

8、IE6/7不支持display:inline-block

解決方案：{display: inline-block; *display: inline;}

9、cursor兼容問題

解決方案：統(tǒng)一使用{cursor: pointer;}

10、IE6/7中img標(biāo)簽與文字放一起時，line-height失效的問題

解決方案：文字和

都設(shè)置 float

11、table寬度固定，td自動換行

解決方案：table設(shè)置 {table-layout: fixed} ，td設(shè)置 {word-wrap: break-word}

12、相鄰元素設(shè)置margin邊距時，margin將取最大值，舍棄小值

解決方案：不讓邊距重疊，可以給子元素加一個父元素，并設(shè)置該父元素設(shè)置：{: hidden}

13、a標(biāo)簽css狀態(tài)的順序

解決方案：按照link--visited--hover--active 的順序編寫

14、IE6/7圖片下面有空隙的問題

解決方案：img{display: block;}

15、ul標(biāo)簽在Firefox中默認(rèn)是有padding值的，而在IE中只有margin有值

解決方案：ul{margin: 0;padding: 0;}

16、IE中l(wèi)i指定高度后，出現(xiàn)排版錯誤

解決方案：設(shè)置line-height

17、ul或li浮動后，顯示在div外

解決方案：清除浮動；須在ul標(biāo)簽后加 來閉合外層div

18、ul設(shè)置float后，在IE中margin將變大

解決方案：ul{display: inline;} ， li{list-style-: outside;}

19、li中內(nèi)容超過長度時，用省略號顯示

li{ width: 200px; white-space: nowrap; text-: ; -o-text-: ; : hidden; }

20、div嵌套p時，出現(xiàn)空白行

解決方案：li{display: inline;}

21、IE6默認(rèn)div高度為一個字體顯示的高度

解決方案：{line-height: 1px;} 或 {: hidden;}

22、在Chrome中字體不能小于10px

解決方案：p{font-size: 12px; : scale(0.8);}

23、谷歌瀏覽器上記住密碼后輸入框背景色為黃色

input{ -color: !; } input:-webkit-, :-webkit-, select:-webkit-{ -webkit-text-fill-color: #333 !; -webkit-box-shadow: 0 0 0 1000px inset !; -color: !; -image: none !; : -color 5000s ease-in-out 0s; }

24、CSS3兼容前綴表示

寫法內(nèi)核瀏覽器

-webkit-

webkit渲染引擎

chrome/safari

-moz-

gecko渲染引擎

Firefox

-ms-

trident渲染引擎

IE

-o-

opeck渲染引擎

Opera

如：

.box{ height: 40px; -color: red; color: #fff; -webkit-border-radius: 5px; // chrome/safari -moz-border-radius: 5px; // Firefox -ms-border-radius: 5px; // IE -o-border-radius: 5px; // Opera border-radius: 5px; }

JS兼容問題

1、事件對象的兼容

e = ev || window.event

2、滾動事件的兼容

= .. || .body.;

3、阻止冒泡的兼容

if (e.) { e.; } else { e.=true; }

4、阻止默認(rèn)行為的兼容

if (e.) { e.; } else { e. = false; }

5、添加事件監(jiān)聽器的兼容

if (target.) { target.("click", fun, false); } else { target.("onclick", fun); }

6、ajax創(chuàng)建對象的兼容

var xhr = null； if (window.) { xhr = new ; } else { xhr = new (" XMLHTTP"); }

7、鼠標(biāo)按鍵編碼的兼容

mouse (ev) { var e = ev || window.event; if (evt) { return e.button; } else if (window.event) { switch (e.button) { case 1: return 0; case 4: return 1; case 2: return 2; } } }

8、在IE中，event對象有x，y屬性，F(xiàn)irefox中與event.x等效的是event.pageX，而event.pageX在IE中又沒有

x = event.x ? event.x : event.pageX;

9、在IE下，event對象有屬性，但是沒有target屬性；Firefox下，event對象有target屬性，但是沒有屬性

var source = ev.target || ev.; var target = ev. || ev.;

10、在Firefox下需要用CSS禁止選取網(wǎng)頁內(nèi)容，在IE用JS禁止

-moz-user-select: none; // Firefox obj. = {return false;} // IE

11、在IE中能正常工作，但在FireFox中卻不行

if (.appName.indexOf("") > -1) { .('element'). = "IE"; } else { .('element'). = "Firefox"; }

12、在Firefox下，可以使用const關(guān)鍵字或var關(guān)鍵字來定義常量；在IE下，只能使用var關(guān)鍵字來定義常量

解決方案：統(tǒng)一使用var 關(guān)鍵字來定義常量

移動端兼容問題

解決方案：

2、禁止iOS彈出各種操作窗口

解決方案：-webkit-touch-callout:none

解決方案：

4、禁止iOS和Android用戶選中文字

解決方案：-webkit-user-select:none

5、iOS下取消input在輸入的時候英文首字母的默認(rèn)大寫

解決方案：

6、Android下取消輸入語音按鈕

解決方案：input::-webkit-input-speech-button {display: none}

7、在移動端修改難看的點擊的高亮效果，iOS和安卓下都有效

解決方案：* {-webkit-tap--color:rgba(0,0,0,0);}

8、iOS下input為type=button屬性設(shè)置true，會出現(xiàn)樣式文字和背景異常問題

解決方案：使用opacity=1;

9、input為fixed定位，在iOS下input固定定位在頂部或者底部，在頁面滾動一些距離后，點擊input(彈出鍵盤)，input位置會出現(xiàn)在中間位置

解決方案：內(nèi)容列表框也是fixed定位，這樣不會出現(xiàn)fixed錯位的問題

10、移動端字體小于12px使用四周邊框或者背景色塊，部分安卓文字偏上bug問題

解決方案：可以使用整體放大1倍(width、height、font-size等等)，再使用縮放

11、在移動端圖片上傳圖片兼容低端機的問題

解決方案：input 加入屬性accept="image/*"

12、在Android上文字設(shè)置行高會偏上

解決方案：input有情況下不要設(shè)置行高

13、: scroll或auto；在iOS上滑動卡頓的問題

解決方案:加入-webkit--: touch;