[[435587]]

【51CTO.com快譯】由于各種瀏覽器的工作機制不同，跨瀏覽器兼容性是開發人員需要特別關注和處理的一個關鍵方面。

隨著軟件市場規模在不斷增長，瀏覽器和IT設備的數量也在不斷增長。客戶希望選擇更好的網站來滿足他們的需求。因此，企業有必要為他們提供貼心的用戶體驗和服務。由于很多瀏覽器不時推出新版本，這使得開發人員很難處理跨瀏覽器兼容性問題。

跨瀏覽器兼容性是開發人員需要特別關注和處理的關鍵的一方面，并且由于可用的各種瀏覽器的工作機制不同，因此處理起來一直具有挑戰性。當采用不同的設備操作系統組合時，它變得更加復雜。因此，發現如何解決跨瀏覽器兼容性問題是開發人員的一項高度優先的工作，這對業務運營至關重要。

什么是跨瀏覽器兼容性?

簡而言之，跨瀏覽器兼容性是Web應用程序能夠在采用各種類型的瀏覽器、操作系統、設備的多個平臺上在外觀和行為方面一致運行的能力。隨著生態系統中引入越來越多的設備、操作系統和瀏覽器，為它們提供支持對于前端開發人員來說是一個相當大的挑戰。不同的用戶有不同的瀏覽器偏好，企業不能強迫他們切換到其他瀏覽器類型。

因此，檢查網站是否兼容舊的傳統瀏覽器也很重要。但如何才能實現這一切?它的重點是糾正開發人員面臨的主要跨瀏覽器兼容性問題。本文將回答關于什么是跨瀏覽器兼容性問題和解決方案。

以下深入探討一些導致開發人員瀏覽器兼容性問題的關鍵挑戰。

1.層疊樣式表(CSS)的問題

導致跨瀏覽器兼容性問題并使開發人員難以處理的最重要方面之一是層疊樣式表(CSS)。管理CSS非常復雜且無組織性。處理CSS不僅給Web開發人員帶來了挑戰，也給開發瀏覽器的人帶來了挑戰。借助新興的跨瀏覽器策略和測試工具，可以輕松解決兼容性問題。開發人員之間有一個共同的觀念，即開發人員希望更多地關注Web開發的邏輯方面而不是產品。Google瀏覽器在其最流行的子分支中研究了最常見的跨瀏覽器兼容性問題，例如CSS Flexbox、CSS Position Sticky、Grid、縱橫比和CSS轉換。

谷歌公司與微軟、Igalia和Mozilla合作，一直在努力解決兼容性2021項目(也稱為COMPAT 2021)的這些兼容性問題。微軟公司負責改進Chromium瀏覽器中的CSS網格和子網格，并計劃讓所有網格測試都合格。

2.老舊瀏覽器的問題

Internet Explorer等傳統瀏覽器已經過時，不再支持最新技術。即使是Mozilla Firefox、Google Chrome等其他瀏覽器的舊版本，也包含在老舊瀏覽器類別中。技術在不斷發展，所以CSS的功能必須隨著這種發展而改變。但說起來容易做起來難。完全實現CSS更新是不可能的，因為即使在今天，許多用戶仍使用Internet Explorer作為他們的首選瀏覽器。

瀏覽器不斷發布更新的新功能，但并非所有用戶都使用其首選瀏覽器的更新版本。因此，需要測試這些問題，以避免所有瀏覽器和更新版本之間的瀏覽器兼容性問題，以獲得更好的用戶體驗。

3.Internet Explorer過時的問題

Internet Explorer(IE)曾經在很長一段時間主導了瀏覽器市場。但是，隨著技術的快速發展，Internet Explorer已經過時并且不支持其他瀏覽器支持的功能。而兼容IE瀏覽器如今已經成為開發者面臨的一個主要問題，也是導致跨瀏覽器兼容性問題的首要原因，因為部分用戶仍然采用IE瀏覽互聯網。

它不能提供多類支持，表單布局設計不是很好，而且它也沒有使用其他地方可用的大多數新屬性進行更新。盡管Internet Explorer支持CSS Flexbox，但仍不能完全解決問題。據悉，從2022年起，部分Windows10版本將不再提供對IE 11桌面的支持。MS Edge上的IE模式將用于訪問和測試IE。

很多人不會輕易放棄Internet Explorer，因為它有悠久的使用歷史，而所有的瀏覽器都始于IE。Internet Explorer取得了巨大的成功，它在過去的貢獻也是如此。許多關于醫療健康、會計、庫存等的應用程序都是建立在Internet Explorer之上的。即使在今天，許多企業仍在使用IE，因為切換到其他瀏覽器的代價很高。考慮到上述所有原因，開發人員應該理解IE不能被忽視的原因，至少目前是這樣，他們需要確保在Internet Explorer上也優先測試跨瀏覽器兼容性問題。

4.JavaScript的兼容性問題

在解決跨瀏覽器兼容性問題時，開發人員也面臨JavaScript的兼容性問題。盡管HTML和CSS有了很多進步，但構建Web應用程序依賴于JavaScript。開發者在使用JavaScript解決瀏覽器兼容性問題時面臨很多挑戰，主要是在網頁中使用了舊瀏覽器不支持的功能，或者使用了不合適的DOCTYPE和錯誤的瀏覽器嗅探代碼等。

應該有一個適當的機制來處理JavaScript等腳本語言，以消除JavaScript的跨瀏覽器兼容性問題。JavaScript相關的跨瀏覽器兼容性問題的一些示例是：

• 針對不同瀏覽器調整ECMAScript版本。
• 支持ECMAScript 6版本，但只能使用Polyfills。
• 沒有可用的JavaScript原生支持。
• 使用編譯器導致的代碼膨脹。
• JavaScript包含多個降低應用程序速度的模塊和軟件包。

使用JavaScript解決跨瀏覽器兼容性問題對開發人員來說是一個很大的問題。因此，運行跨瀏覽器兼容性測試以找出跨瀏覽器兼容性問題和解決方案至關重要。

5.布局和樣式兼容性的問題

大多數開發人員都在努力解決樣式和布局問題。任何企業都需要一個設計良好、反應迅速的網站。但考慮到不同的瀏覽器、平臺和設備，這是不可能實現的。使用CSS Flexbox和CSS網格在各種瀏覽器之間實現持久的布局兼容性并不容易。具有響應性設計和布局的動態網站總是存在滾動和視口大小支持等問題，這會給開發人員帶來嚴重的跨瀏覽器兼容性問題。

6.漸進式Web應用程序兼容性問題

漸進式Web應用程序是不具有原生Web應用程序功能的一種非原生應用程序。它無法利用設備的原生功能，如訪問相機或文件等。管理PWA已經成為開發人員的痛點。但是，谷歌公司始終支持PWA的未來，并提供了用于PWA開發的API列表。PWA由蒙版圖標支持，但需要向瀏覽器攜帶固定圖標和個人Web應用程序清單。因此，瀏覽器兼容性至關重要，即使是漸進式Web應用程序也是如此。雖然頻繁更換圖標無疑是人們最不喜歡的任務，但也不容忽視。

7.瀏覽器渲染期間的問題

有時，某些元素在一個瀏覽器上有效，但在另一個瀏覽器上無效。這些渲染問題會導致跨瀏覽器兼容性問題。每個瀏覽器引擎在呈現網頁時都以獨特的方式工作，而這些瀏覽器引擎提供人們在瀏覽器上看到和使用的所有內容。因此，字體大小和圖像比例可能變得不協調，導致頁面渲染不一致。除非您采用云計算測試平臺來簡化跨瀏覽器測試，否則在多種瀏覽器及其版本上測試網站的兼容似乎是不可能的。

8.延遲采用新更新的問題

開發人員不斷發布新功能，但瀏覽器并沒有立即接受這些功能。這種延遲會在實現中造成其他問題，導致嚴重的跨瀏覽器兼容性問題。每當采用新功能出現延遲時，就會影響網站的質量。Mozilla Firefox支持的CSS子網格有助于解決開發人員的前端和設計問題。CSS子網格是用于構建嵌套網格的新CSS功能。另一個網格中有一個網格，可以幫助前端開發人員解決許多可預測的兼容性問題。

9.CSS Flexbox的問題

導致跨瀏覽器兼容性問題的另一個主要原因是CSS Flexbox。正如以上所提到的，CSS Flexbox包含在Compat21項目中，顯示了影響瀏覽器兼容性的問題。Flexbox產生的設計和布局問題被認為是開發人員面臨的關鍵的瀏覽器兼容性挑戰。Flexbox提供了網頁內容的結構。70%以上的頁面的源代碼中包含CSS Flexbox。CSS Flexbox包含所有瀏覽器當前不支持的屬性列表。

10.采用Polyfill引起的問題

Polyfill是一段JS代碼，用于為本身不支持它們的舊瀏覽器提供現代的瀏覽器功能。Polyfill對開發人員很重要，因為有時許多功能會在瀏覽器中失敗。因此，為了應對這種情況而使用了Polyfill。那么，為什么開發人員不愿意處理這種混亂的兼容性業務?這是因為如何解決跨瀏覽器兼容性問題是開發人員的職責。

他們無法擺脫清理混亂和保持網站在不同平臺上的一致性。Polyfill被認為是開發人員的額外負擔，因此開發人員不愿意采用，尤其是在舊瀏覽器的情況下。Polyfill是2021年最新出現的兼容性難題。

結論

跨瀏覽器兼容性是網站提供用戶體驗所依賴的一個關鍵方面。對于開發人員來說，處理這些問題在大多數時候都是一場噩夢。無論如何努力避免，它們都會占上風，因為出現錯誤和開發工作是齊頭并進的。而開發人員如今別無選擇，只能想方設法解決這些問題。

原文標題：Major Cross-browser Compatibility Issues Faced by the Developers，作者：Priyanka Charak

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】