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

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

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

2. 使用框架。Foundation 和 Bootstrap 等 CSS 框架將為你提供樣式代碼，讓你更輕松地進(jìn)行交叉兼容性。如果你花時(shí)間熟悉某些功能，構(gòu)建響應(yīng)式 Web 應(yīng)用程序?qū)⒆兊酶?、更容易。這些還將幫助你使應(yīng)用程序在移動(dòng)瀏覽器中的外觀和行為正確無誤。

3. 定義有效的 Doctype。Doctype 是你代碼中的第一行，它描述了將在你的應(yīng)用程序中使用的 HTML。因?yàn)椴煌臑g覽器有不同的標(biāo)準(zhǔn)和規(guī)則，所以你需要定義Doctype，否則渲染引擎基本上會(huì)為你猜測。當(dāng)然，這可能會(huì)導(dǎo)致你想要避免的錯(cuò)誤和不一致。

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

5. 驗(yàn)證。驗(yàn)證你的 HTML 和 CSS 以防止出現(xiàn)問題是個(gè)好主意。使用 W3C HTML Validator 和 CSS Validator 來確保你的代碼沒有錯(cuò)誤，如果沒有則修復(fù)它。

6. 條件注釋。條件注釋允許你鏈接不同瀏覽器的樣式表，這在涉及 Internet Explorer 常見的設(shè)計(jì)挑戰(zhàn)時(shí)特別有用。

7. 為差異做好準(zhǔn)備。同樣，幾乎不可能有一個(gè)在每個(gè)瀏覽器上看起來都相同的設(shè)計(jì)，除非它非?；?。無論你遵循什么規(guī)則，形式和排版等細(xì)節(jié)都可能會(huì)有所不同。你的主要關(guān)注點(diǎn)不應(yīng)該是讓設(shè)計(jì)在每個(gè)瀏覽器上看起來都相同。相反，你應(yīng)該確保它看起來可以接受并且可以使用，而不會(huì)包含不合適的元素或阻止某人訪問某些功能的元素。

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