言

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

嘿，xdm~既然點進來了，不妨就繼續看下去吧^_^

概念

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

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

產生的原因

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

怎么理解上述文字？即：不同瀏覽器使用的內核及所支持的HTML等網頁語言標準不同，以及用戶客戶端的環境不同（如分辨率不同）造成了顯示效果不能達到理想效果。

解決方法

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

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

CSS兼容問題

1、不同瀏覽器的標簽默認的內外邊距不同

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

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

/**
 * 該文件用于清除瀏覽器樣式
 */
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默認樣式*/
input, button, textarea {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(255, 225, 225, 0);
    padding: 0;
    border: 0;
    outline: 0;
}
// 修改placeholder屬性默認文字顏色
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;
}

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

2、圖片加a標簽在IE9中會有邊框

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

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

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

4、IE6及更低版本中，部分塊元素擁有默認高度

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

5、a標簽藍色邊框

解決方案：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兼容問題

解決方案：統一使用{cursor: pointer;}

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

解決方案：文字和<img>都設置float

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

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

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

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

13、a標簽css狀態的順序

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

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

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

15、ul標簽在Firefox中默認是有padding值的，而在IE中只有margin有值

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

16、IE中li指定高度后，出現排版錯誤

解決方案：設置line-height

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

解決方案：清除浮動；須在ul標簽后加<div style="clear:both"></div>來閉合外層div

18、ul設置float后，在IE中margin將變大

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

19、li中內容超過長度時，用省略號顯示

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

20、div嵌套p時，出現空白行

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

21、IE6默認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、阻止默認行為的兼容

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

5、添加事件監聽器的兼容

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

6、ajax創建對象的兼容

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

7、鼠標按鍵編碼的兼容

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屬性，Firefox中與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禁止選取網頁內容，在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關鍵字或var關鍵字來定義常量；在IE下，只能使用var關鍵字來定義常量

解決方案：統一使用var關鍵字來定義常量

移動端兼容問題

1、禁止iOS識別長串數字為電話

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

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

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

3、禁止Android手機識別郵箱

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

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

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

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

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

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

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

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

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

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

解決方案：使用opacity=1;

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

解決方案：內容列表框也是fixed定位，這樣不會出現fixed錯位的問題

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

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

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

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

12、在Android上placeholder文字設置行高會偏上

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

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

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

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

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

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

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

16、移動端click300ms延時響應

解決方案：使用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; 
}

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

看文至此，順手點個贊再走唄，3Q^_^

后語

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

覽器兼容

瀏覽器

瀏覽器大戰

第一次瀏覽器大戰發生在上個世紀90年代，微軟發布了它的IE瀏覽器，和網景公司的Netscape Navigator瀏覽器大打出手。 ?

第二次瀏覽器大戰發生在20世紀。 ?

戰爭產物：Internet Explorer 9

13年市場比重

14年市場比重

15年市場比重

17年市場比重

19年市場比重

瀏覽器內核 ( 現代4大內核 )

Trident 代表作：IE

元老級內核之一，由微軟開發，并于1997年10月首次在ie 4.0中使用，憑借其windows壟斷優勢，Trident市場占有率一直很高。然而壟斷并非，沒有競爭就沒有進步，長期以往，Trident內核一度停滯不前，更新緩慢，甚至一度與W3C標準脫節。2011年，從ie 9開始，Trident開始支持HTML5和CSS 3，因此我們也經常會看到有些網站在瀏覽時會提示用戶（在Internet Explorer 9.0+以上瀏覽效果最佳）。前端程序員做瀏覽器兼容一般也不再會考慮ie 8之前的瀏覽器了。

Gecko 代表作：Mozilla

元老級內核之一，由Netscape公司Mozilla組織開發。1998年，Netscape在于IE瀏覽器競爭失利之后，成立了非正式組織Mozilla，由其開發新一代內核，后命名為“Gecko”。FireFox也是這班人開發出來了，因此這也就是Mozilla一直使用的內核。 Gecko的特點是代碼完全公開，因此其開發程度很高，全世界的程序員都可以為其編寫代碼，增加功能。

WebKit : 蘋果 & 谷歌舊版本

這是蘋果公司開發的內核，也是其旗下產品Ssfari瀏覽器使用的內核。Webkit引擎包含了WebCode排版引擎和JavaScriptCode解析引擎，分別是從KDE的KHTML和KJS衍生而來，它們都是自由軟件，在GPL條約下授權，同時支持BSD系統開發。 Chrome、360極速瀏覽器以及搜狗高速瀏覽器也使用Webkit作為內核（在腳本理解方面，Chorome使用自己研發的V8引擎）。

Blink : 代表作：谷歌 & 歐鵬

這是由Google和Opera Software開發的瀏覽器排版引擎，Google計算將這個渲染引擎作為Chromium計劃的一部分，并且在2013年4月公布了這一消息。這一渲染引擎是開源引擎Webkit中WebCore組件的一個分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex瀏覽器中使用

Presto ( Opera前內核 已經廢棄 )

為什么會出現瀏覽器兼容問題？

由于各大主流瀏覽器由不同的廠家開發，所用的核心架構和代碼也很難重和，這就為各種莫名其妙的Bug(代碼錯誤）提供了溫床。再加上各大廠商出于自身利益考慮而設置的種種技術壁壘，都讓CSS應用起來比想象得要麻煩。瀏覽器的兼容問題是我們必須去克服的。

CSS Bug、CSS Hack和Filter

• CSS Bug: CSS樣式在各瀏覽器中解析不一致的情況，或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS bug.
• CSS Hack: CSS中，Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法，因為它們都屬于個人對CSS代碼的非官方的修改，或非官方的補丁。有些人更喜歡使用patch(補丁)來描述這種行為。
• Filter:表示過濾器的意思，它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或聲明的方法。本質上講，Filter是一種用來過濾不同瀏覽器的Hack類型。

常見的BUG

IE低版本常見CSS解析Bug及hack

1)圖片有邊框BUG

當圖片加<a href=“#”></a>在IE上會出現邊框

Hack:給圖片加border:0;或者border:0 none;

2)圖片間隙

div中的圖片間隙BUG

描述：在div中插入圖片時，圖片會將div下方撐大大約三像素。

hack1:將</div>與<img>寫在一行上；

hack2:將<img>轉為塊狀元素，給<img>添加聲明：display:block;

3) 雙倍浮向（雙倍邊距）（只有IE6出現）

描述：當Ie6及更低版本瀏覽器在解析浮動元素時，會錯誤地把浮向邊邊界（margin）加倍顯示。

hack:給浮動元素添加聲明：display:inline;

4)默認高度（IE6、IE7）

描述：在IE6及以下版本中，部分塊元素擁有默認高度（在16px左右；）

hack1:給元素添加聲明：font-size:0;

hack2：給元素添加聲明：overflow:hidden;

非IE BUG

5)表單元素對齊不一致

描述：表單元素行高對齊方式不一致

hack:給表單元素添加聲明：float:left;

6)按鈕元素默認大小不一

描述：各瀏覽器中按鈕元素大小不一致

hack1： 統一大小/（用a標記模擬）

hack2:input外邊套一個標簽，在這個標簽里寫按鈕的樣式，把input的邊框去掉。

hack3:如果這個按鈕是一個圖片，直接把圖片作為按鈕的背景圖即可。

7)鼠標指針bug

描述：cursor屬性的hand屬性值只有IE9以下瀏覽器識別，其它瀏覽器不識別該聲明，cursor屬性的pointer屬性值IE6.0以上版本及其它內核瀏覽器都識別該聲明。

hack: 如統一某元素鼠標指針形狀為手型，

應添加聲明：cursor:pointer cursor: ;

auto默認

crosshair加號

text文本

wait等待

help幫助

progress過程

inherit繼承

move移動

ne-resize向上或向右移動

pointer手形

8)透明屬性

兼容其他瀏覽器寫法：opacity:value;(value的取值范圍0-1; 例：opacity:0.5;)

IE瀏覽器寫法：filter:alpha(opacity=value);取值范圍 1-100(整數)

過濾器

1.下劃線屬性過濾器

當在一個屬性前面增加了一個下劃線后，由于符合標準的瀏覽器不能識別帶有下劃線的屬性而忽略了這個聲明，但是在IE6及更低版本瀏覽器中會繼續解析這個規則。

語法：選擇符{_屬性：屬性值；}

2. !important

關鍵字過濾器 它表示所附加的聲明具有最高優先級的意思。但由于IE6及更低版本不能識別它， 我們可以利用IE6的這個Bug作為過濾器來兼容ＩＥ６和其它標準瀏覽器。

語法：選擇符{屬性：屬性值!important;}

3. *屬性過濾器

當在一個屬性前面增加了*后，該屬性只能被IE7瀏覽器識別，其它瀏覽器混略該屬 性的作用。

語法：選擇符{*屬性：屬性值；}

4. ：IE版本識別；其它瀏覽器都不識別

語法：選擇符{屬性：屬性值;}

5. >5. \0 : IE8 及以上版本識別；其它瀏覽器都不識別