最近，我一直在为某人建立一个网站，并且对某些浏览器以一种方式呈现网站而其他浏览器以另一种方式呈现网站感到恼火。我决定研究为什么会这样，并发现问题可能出在浏览器下方的 HTML 引擎中。例如，Chrome 和 Opera（以及大多数（如果不是全部）Chromium 浏览器）使用 Blink 引擎，它是 WebKit 引擎（源自 KHTML 引擎）的一个分支。Safari 使用 WebKit。Internet Explorer 使用 Trident 浏览器；Edge 使用 Trident 的分支，称为 EdgeHTML。Netscape 和 FireFox 使用（或使用，在 Netscape 的情况下，考虑到浏览器已停产）Gecko 引擎。
考虑到所有这些，是否可以将 CSS 应用于特定引擎而不是浏览器？或者当我们尝试使用特定于浏览器的 CSS 时，这已经完成了吗？用户代理字符串的目的是这样做吗（这显然被想要模仿其他浏览器的开发人员搞砸了）？
请注意，通过比较这些引擎的相关性，我认为有 3 个主要引擎：基于 KHTML、基于 Trident 和 Gecko。所以我猜这个问题的答案至少会给出三种不同的方法（每个主引擎一个）。
您可以使用供应商前缀，甚至可以通过带有供应商前缀的支持查询来定位其中一些，例如
@supports (-webkit-appearance:none) {}
Browserhacks有很多方法可以解决这个问题。
话虽如此，你真的，真的不应该。维持下去将是一场噩梦。
浏览器差异是由以下原因引起的：
1）不同的用户代理风格（默认浏览器规则）；Normalize或reset会为您解决这个问题。
2) 一些可能仅适用于某些浏览器或它们之间不同的实验性功能，通常由供应商前缀解决；诸如Prefix Free或 Post CSS 的Autoprefixer之类的Autoprefixer处理得非常好。
3) 不同的功能；知道你能做什么和不能做什么会让你走很长的路，每当你发现一个限制时，一定要使用回退甚至 polyfill。
99.999% 可以通过 normalise、自动前缀以及对浏览器功能和回退的正确理解来实现。
请记住，您的项目应该在所有浏览器上都能正常工作（或者尽可能多，没有人希望在 2018 年支持 IE6 ..），但它可以在某些/大多数情况下看起来并有更好的体验。这就是渐进增强和优雅降级的目的。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句