言

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

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

概念

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

上面的定義就是大白話，我們來看看來自百度百科的權(quán)威解釋：瀏覽器兼容性問題又被稱為網(wǎng)頁兼容性或網(wǎng)站兼容性問題，指網(wǎng)頁在各種瀏覽器上的顯示效果可能不一致而產(chǎn)生瀏覽器和網(wǎng)頁間的兼容問題。在網(wǎng)站的設(shè)計(jì)和制作中，做好瀏覽器兼容，才能夠讓網(wǎng)站在不同的瀏覽器下都正常顯示。而對于瀏覽器軟件的開發(fā)和設(shè)計(jì)，瀏覽器對標(biāo)準(zhǔn)的更好兼容能夠給用戶更好的使用體驗(yà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)頁在瀏覽器中的兼容性。有了這個工具我們就可以快速地了解到代碼在各個瀏覽器中的兼容情況了，強(qiáng)烈推薦一波，大家趕緊去體驗(yàn)吧?！界面效果如下圖所示：

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

CSS兼容問題

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

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

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

/**
 * 該文件用于清除瀏覽器樣式
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, 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,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    padding:0;
    margin:0;
    border:0;
    outline: 0;
    font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    word-wrap:break-word;
}
html, body {
    width: 100%;
    height: 100%;
}
a {
    text-decoration: none;
    -webkit-tap-highlight-color:rgba(255,255,255,0);
}
ul, ol {
    list-style-type: none;
}
textarea {
    resize: none;
}
/*去除input button默認(rèn)樣式*/
input, button, textarea {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(255, 225, 225, 0);
    padding: 0;
    border: 0;
    outline: 0;
}
// 修改placeholder屬性默認(rèn)文字顏色
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #999;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #999;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #999;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #999;
}

除了自己定義清除默認(rèn)樣式的代碼，也可選擇引用別人寫好的成熟插件Normalize.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失效的問題

解決方案：文字和<img>都設(shè)置float

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

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

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

解決方案：不讓邊距重疊，可以給子元素加一個父元素，并設(shè)置該父元素設(shè)置：{overflow: 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 style="clear:both"></div>來閉合外層div

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

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

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

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

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

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

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

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

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

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

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

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

24、CSS3兼容前綴表示

如：

  .box{
       height: 40px;
       background-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、滾動事件的兼容

scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

3、阻止冒泡的兼容

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

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

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

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

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

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

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

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

function 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對象有srcElement屬性，但是沒有target屬性；Firefox下，event對象有target屬性，但是沒有srcElement屬性

var source = ev.target || ev.srcElement;
var target = ev.relatedTarget || ev.toElement;

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

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

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

if (navigator.appName.indexOf("Explorer") > -1) {
    document.getElementById('element').innerText = "IE";
} else {
    document.getElementById('element').textContent = "Firefox";
}

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

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

移動端兼容問題

1、禁止iOS識別長串?dāng)?shù)字為電話

解決方案：<meta content="telephone=no" name="format-detection" />

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

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

3、禁止Android手機(jī)識別郵箱

解決方案：<meta content="email=no" name="format-detection" />

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

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

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

解決方案：<input autocapitalize="off" autocorrect="off" />

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

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

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

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

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

解決方案：使用opacity=1;

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

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

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

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

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

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

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

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

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

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

14、iOS中日期如：2022-02-22 00:00:00格式的時間轉(zhuǎn)時間戳不成功

解決方案：需要將時間中的'00:00:00去除之后才能轉(zhuǎn)為時間戳'

15、iOS中需要將時間格式轉(zhuǎn)為/，如：2022/02/22

let date = '2022-02-22';
let dateStr = date.replace(/-/g, '/'); // 2022/02/22

16、移動端click300ms延時響應(yīng)

解決方案：使用Fastclick

window.addEventListener( "load", function() { 
    FastClick.attach( document.body ); 
}, false );

17、移動端1px邊框問題

解決方案：原先元素的border去掉，然后利用:before或者:after重做border，并transform的scale縮小一半，原先的元素相對定位，新做的border絕對定位

.border-1px{ 
    position: relative; 
    border:none; 
}

.border-1px:after{
    content: '';
    position: absolute; 
    bottom: 0;
    background: #000;
    width: 100%; 
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0; 
}

至此，關(guān)于瀏覽器兼容性問題的相關(guān)知識和解決方案就聊完了，最后還穿插了關(guān)于移動端兼容的問題描述，肯定還有很多沒有總結(jié)到的兼容性問題，希望xdm在下方評論↘提供。

看文至此，順手點(diǎn)個贊再走唄，3Q^_^

后語

伙伴們，如果覺得本文對你有些許幫助，點(diǎn)個或者?個關(guān)注在走唄^_^ 。另外如果本文章有問題或有不理解的部分，歡迎大家在評論區(qū)評論指出，我們一起討論共勉。