跨浏览器兼容性有时会导致Web开发人员头痛，但这对应用程序的成功至关重要。请继续阅读以开始使用它！

跨浏览器兼容性非常重要。很重要。我们在之前的帖子中已经确定了需要跨浏览器兼容网站的事实 。那么下一步是，如何制作跨浏览器兼容的网站？我们如何确保我们的网站能够在目标受众可以访问的所有浏览器上提供流畅无缝的用户体验，无论是Firefox，Chrome还是Internet Explorer？

在开发网站时，通常使用JavaScript，CSS和HTML的组合，CSS3和HTML5是最新的。

如果您还在开发这些技术的网站，您可能需要注意一些要点，以使您的网站适合所有浏览器。

那么，让我们开始吧。

大多数开发人员做的第一件事就是开始为他们喜欢的浏览器开发网站，或者在某些情况下，开发最可能被目标受众使用的浏览器。我们假设它是谷歌Chrome的最新版本，通常就是这种情况。该网站使用所有最新的CSS，JS和框架技术。该网站很漂亮，有很棒的动画过渡和干净的字体。最重要的是它完美运作。 更正： 在最新的Chrome浏览器上完美运行。

当您决定为各种版本的IE或Safari测试时，就会出现海啸。现在没有什么工作完美，每个部分都堆叠不正确，甚至没有显示某些元素，因为甚至没有触发动画。

正如我已经解释的那样，IE仍占据主要市场份额，是市场上最被低估的浏览器之一。忽略它可能会导致开发问题。因此，第一个也是最必要的步骤是定义完美的 跨浏览器测试策略。

因此，您现在必须针对不同的浏览器测试您的应用程序，正如我所说，对于被低估的浏览器和着名的浏览器也是如此。

是时候你发现了一些重大错误。所以，让我们来解决它们。

不适用于不同的浏览器？

如果您发现您的网站无法在某些浏览器上运行，则可以对代码进行一些细微的更改。原因可能是某些浏览器不支持某些技术和功能。因此，如果您的网站不适用于所有浏览器，则需要找出该特定浏览器出现问题的位置。

使用Opera Mini Mobile Browser查找跨浏览器兼容性问题：

如果您使用的元素如下：

• CSS3 3D变换。
• 2D变换。
• 背景图片。
• HTML5表单功能。
• 语义元素。
• 占位符显示的CSS伪类。
• Web身份验证API。
• 主题颜色元标记。

那么您的网站将无法在Opera Mini浏览器上执行。

使用Firefox浏览器查找跨浏览器兼容性问题：

Firefox通常支持最新技术。Mozilla是网络技术的潮流引领者。但是，仍有一些firefox浏览器不完全支持的元素，例如：

• Filesystem和FileWriter API。
• Web SQL数据库。
• XHTML + SMIL动画。
• EOT字体。

这些都是最新稳定的Firefox（60）不支持的主要元素。因此，使用这些技术和样式可能会导致您的网站在最新版本的Firefox中收支平衡。

查找Safari的跨浏览器兼容性问题

如果使用共享Web工作者，CSS溢出锚定，Web身份验证API，则您的应用程序将无法在Safari浏览器中运行。但是，Safari部分支持一些功能，如HTML5表单功能和CSS掩码。因此，如果使用这些功能，也可能导致您的网站在Safari浏览器中无法正常运行。

如果您使用其他一些功能和技术并且想知道浏览器是否支持，那么您可以使用CanIUse找到 答案。因此，为了确保您已使用所有浏览器支持的技术，您只需输入技术并比较浏览器即可。它会显示如下结果：

因此，您可以看到Edge，Firefox和Chrome的最新浏览器版本仅支持Web身份验证API，因此在其他显示跨浏览器不兼容问题的版本中无法使用。同样，您可以检查其他Web技术和功能。

除了检查浏览器是否支持该技术之外，还必须遵循一些主要指导原则，以确保最终网站与跨浏览器兼容。

检查Doctype

您需要确保的第一件事是您在HTML文件中添加了DOCTYPE。

如果你没有，那么立即做。

Doctype基本上可以帮助您的浏览器识别您的网站代码所用的语言。如果你没有指定，一些智能浏览器会自己理解它，但是一些愚蠢的浏览器将无法弄清楚发生了什么，它们将以你不喜欢的方式呈现你网站的某些元素。

所以，如果你想IE6及以上版本应该模仿浏览器的行为，比如chrome和firefox你可能想要添加一个strict doctype。

如果您不这样做，浏览器将工作Quirks mode并将模拟旧版本的行为。

你应用CSS重置吗？

不同的浏览器工作不同 一种风格可以在一个浏览器上运行，但在另一个浏览器上会显示一些不同的风格。这里的主要因素是CSS。

例如，您可能已经看到，很多时候，提交按钮在不同浏览器上的外观不同; 这是因为CSS。因此，如果某些元素在不同的浏览器中无法正确呈现，则可能是因为CSS。当您应用CSS重置时，您告诉每个浏览器将样式删除到默认CSS，导致跨浏览器不兼容。

这对Internet Explorer来说具有很大的价值！

非常着名的 Eric Meyer的CSS重置 可用于帮助您解决此浏览器不兼容问题。或者您可以使用标准CSS Resets，例如 normalize.css。

但是，请确保在主样式表之前添加重置样式表。

为不同的浏览器使用单独的样式表

这样可以避免出现样式表问题。您可以使用条件注释链接到每个浏览器的不同样式表。因此，Chrome将呈现chrome的样式表，Firefox将使用样式表等。

基本条件注释看起来像这样：

或者你也可以尝试一下。

喜欢使用跨浏览器友好的JavaScript库，如jQuery，React.js，MooTools和一些CSS框架，如Bootstrap，Foundation，960 grid等？使用这些跨浏览器兼容的库和框架的原因是你可以依赖它们来知道它们不会引入一些你可以很容易避免的愚蠢错误。使用跨浏览器友好库和框架

搞定？让我们验证！

一旦您处理了所有编码预防措施，就可以验证您的网站了。您可以使用HTML和CSS验证器。这将指出您的所有错误和改进，以确保您的代码不会中断。

您可以使用 w3验证 程序验证您网站的HTML。

验证后，您将看到错误和警告，然后您可以进一步解决。

同样，您也可以验证CSS。使用W3的Jigsaw验证器尝试一下 。你会再次看到如下结果：

获取有关您已完成的错误的信息，然后您可以解决它们。

閱讀更多 愛碼農 的文章

關鍵字: 浏览器 HTML5 网站