浏览器如何显示网页，为什么它们看起来不一样？

浏览网络时，遇到的站点在一种设备之间会有所不同，这并不少见。也许某些功能根本无法使用。

通常，这不是网站的问题。这是您的浏览器。五个主要的桌面浏览器使用四个不同的“渲染引擎"来显示网页-用于Windows 10的新Microsoft Edge浏览器将引入第五个-并且每个浏览器的工作方式都不相同。

这意味着您的体验网络可能会根据您使用的浏览器以及该浏览器的版本而发生变化。

什么是渲染引擎？

网页不是单个实体一次下载并显示在屏幕上一个像素。相反，它实际上是一系列用各种类型的代码（HTML，CSS，JavaScript，PHP和其他代码）编写的指令，它们告诉浏览器做什么，在哪里以及如何做。

每种浏览器都使用渲染引擎（有时也称为布局引擎）来获取代码中包含的内容和样式信息，并以完全格式化的形式将其显示在屏幕上。

麻烦是，并不是每个浏览器都使用一个渲染引擎。虽然每种语言都是由详细的规范定义的，但是引擎只能提供对该规范的解释。

尤其是使用CSS（提供样式信息的代码）时，没有引擎会产生完全相同的信息结果。有时差异可能仅等于此处或那里的奇数未对齐像素，但有时它们可​​能会根本不同。

最流行的浏览器使用四种主要渲染引擎。

Web标准

不同呈现引擎之间的差距远小于Internet Explorer作为主要浏览器时的差距。

诸如acid3之类的测试显示了浏览器呈现页面的准确性，并且大多数现代浏览器的得分很高。然而，遵守标准是一项非常复杂的任务。

HTML，CSS和其他规范非常庞大。添加了新元素；较旧，未使用或过时的将被删除。渲染引擎可能需要很长时间才能反映出这些更改。

任何主流浏览器仍不支持HTML5和CSS规范中的某些元素，某些元素仅部分受支持，而其他元素仍受支持某些浏览器，但不是全部。

通过html5test.com网站，您可以测试浏览器以及所运行的特定版本，以了解其对HTML5官方和实验功能的支持程度。在撰写本文时，Chrome在主要浏览器中排名最高，而Internet Explorer（v11）则排名最低。

如果网络开发人员使用的是一种浏览器支持的功能，而另一种浏览器则不支持，不支持的浏览器必须要么选择接近的等效版本，要么完全忽略该功能（例如，透明框可以呈现为非透明）。

这使得呈现网页的工作比复杂得多它出现。更新频率更高的浏览器与不更新频率更高的浏览器相比，可能更符合标准，与常规的自动Chrome更新相比，与稀疏的IE更新相比，这更为突出。

总结

涉及到如此多的问题，浏览器处理网页的方式持续存在差异也就不足为奇了。

这种情况正在改善，但不可能完全解决。如果每个人都运行他们所选择的浏览器的最新版本，这将有所帮助，但是拥有6年历史的Internet Explorer 8仍然保持4.5％的市场份额，这还有很长的路要走。

哪种浏览器使用，并且保持最新状态吗？您是否找到了无法在您选择的浏览器中运行的网站？在评论中让我们知道。

图片来源：通过Jeremy Keith的设备，通过Duncan Hill不支持的浏览器