一旦你花時間了解一下 Web 瀏覽器的歷史并了解它們的工作原理，構建和測試跨瀏覽器兼容網站的必要性就顯而易見了。

但是，了解跨瀏覽器工作的 Web 應用程序的重要性是一回事，而為其開發又是另一回事。 雖然幾乎不可能讓每個瀏覽器的設計看起來都完全相同，但有幾種方法可以確保你提供一致的用戶體驗。有一些技巧可以讓你的網站交叉兼容。

1. 保持代碼簡單。在編碼時考慮質量而不是數量。不要將十行代碼專門用于只需要三行代碼的功能。簡單的代碼不僅對跨瀏覽器更友好，而且在需要調試或調整兼容性時也更易于維護。

2. 使用框架。Foundation 和 Bootstrap 等 CSS 框架將為你提供樣式代碼，讓你更輕松地進行交叉兼容性。如果你花時間熟悉某些功能，構建響應式 Web 應用程序將變得更快、更容易。這些還將幫助你使應用程序在移動瀏覽器中的外觀和行為正確無誤。

3. 定義有效的 Doctype。Doctype 是你代碼中的第一行，它描述了將在你的應用程序中使用的 HTML。因為不同的瀏覽器有不同的標準和規則，所以你需要定義Doctype，否則渲染引擎基本上會為你猜測。當然，這可能會導致你想要避免的錯誤和不一致。

4. CSS 重置。每個瀏覽器都遵循不同的默認 CSS 規則。這就是為什么你使用 CSS 重置樣式表來確保你的瀏覽器遵循相同的基本規則并保持一致。你希望將其中一個添加為第一個樣式表以進行重置，除非你使用已經擁有的框架。

5. 驗證。驗證你的 HTML 和 CSS 以防止出現問題是個好主意。使用 W3C HTML Validator 和 CSS Validator 來確保你的代碼沒有錯誤，如果沒有則修復它。

6. 條件注釋。條件注釋允許你鏈接不同瀏覽器的樣式表，這在涉及 Internet Explorer 常見的設計挑戰時特別有用。

7. 為差異做好準備。同樣，幾乎不可能有一個在每個瀏覽器上看起來都相同的設計，除非它非常基本。無論你遵循什么規則，形式和排版等細節都可能會有所不同。你的主要關注點不應該是讓設計在每個瀏覽器上看起來都相同。相反，你應該確保它看起來可以接受并且可以使用，而不會包含不合適的元素或阻止某人訪問某些功能的元素。

8.不要跳過跨瀏覽器測試。在開發時記住這些技巧是不夠的。 盡管你試圖避免它，但很容易意外地編寫在一個瀏覽器中不起作用的東西。 這就是為什么你需要在交付前檢查該站點是否在不同瀏覽器上實際運行的原因。 使用 CrossBrowserTesting 之類的工具，你可以在 1,500 多個瀏覽器中執行此操作，因此你永遠不必想知道用戶從不同的機器訪問你的頁面時看到的內容。

原文鏈接：https://www.toutiao.com/a7047750322659836452/