什么是 WebKit，它与 CSS 有什么关系？

css webkit cross-browser rendering-engine

最近，我看到了带有“webkit”标签的问题。此类问题通常是与 CSS、jQuery、布局、跨浏览器兼容性问题等相关的基于 Web 的问题......

那么这个“webkit”是什么，它与 CSS 有什么关系呢？我还注意到各种网站的源代码中有很多 -webkit-... 属性。这两个有关系吗？

更新

所以从目前的答案来看……WebKit 是一个用于 Safari/Chrome 的 HTML/CSS Web 浏览器渲染引擎。是否有适用于 IE/Opera/Firefox 的此类引擎，使用其中一种引擎有什么区别、优缺点？例如，我可以在 Firefox 中使用 WebKit 功能吗？

终极问题... IE 支持 WebKit 吗？

更新 2

所有主流浏览器都使用不同的渲染引擎。我想这是为什么有这么多跨浏览器兼容性问题的一个重要原因！

那么，是否有某种项目或迁移到所有浏览器都将使用的标准渲染引擎？ HTML5 会终结跨浏览器的兼容性问题吗？

您的最后一个问题实际上是“可以告诉 IE 渲染它没有被编程渲染的东西吗？”，答案是否定的

firefox 的渲染引擎叫做 gecko。即使用他们自己的专有引擎。

@Gareth ...谢谢。这正是我不希望听到的 :) 在这种情况下，我希望 IE 可以很快开始兼容......并且人们停止使用 IE6！

查看 css3pie.com，了解通过 CSS 添加到 IE 的一些 webkit 功能。

WebKit 是有史以来最糟糕的 HTML 渲染引擎，没有之一。引用 NWA 的话，不是坏的意思是坏的，但坏的意思是好的。

edgerunner

更新：很明显，WebKit 是一个用于 Safari/Chrome 的 HTML/CSS 网络浏览器渲染引擎。是否有适用于 IE/Opera/Firefox 的此类引擎，使用其中一种引擎有什么区别、优缺点？例如，我可以在 Firefox 中使用 WebKit 功能吗？

每个浏览器都有一个渲染引擎来绘制 HTML/CSS 网页。

IE → Trident（已停产）

Edge → EdgeHTML（Trident 的清理分支）（Edge 在 2019 年切换到 Blink）

火狐 → 壁虎

Opera → Presto（自 2013 年 2 月起不再使用 Presto，考虑 Opera = Chrome，因此现在 Blink）

Safari → WebKit

Chrome → Blink（Webkit 的一个分支）。

有关不同领域的比较列表，请参阅 Comparison of web browser engines。

终极问题... IE 支持 WebKit 吗？

不是原生的。

..感谢您解决我的更新。因此，如果 IE 不支持 WebKit，并且我知道它不支持 -moz- 属性...如何让 IE 接受 CSS3 样式？

@Hristo：取决于您需要哪种风格。

我没有任何特别的想法......我只知道 IE 在跨浏览器兼容性方面很糟糕，我想知道 WebKit 是否是解决该问题的一种方法。

应该更新。 Chrome 开发者分叉了 webkit，Opera 不再使用 presto

EdgeHTML 现在也已停产。

jerone

除了 @KennyTM 所说的：

IE 引擎：Trident CSS 前缀：-ms

引擎：三叉戟

CSS 前缀：-ms

边缘引擎：EdgeHTML → Blink3 CSS 前缀：-ms

引擎：EdgeHTML → Blink3

CSS 前缀：-ms

Firefox 引擎：Gecko CSS 前缀：-moz

引擎：壁虎

CSS 前缀：-moz

Opera 引擎：Presto → Blink1 CSS 前缀：-o (Presto) 和 -webkit (Blink)

引擎：Presto → Blink1

CSS 前缀：-o (Presto) 和 -webkit (Blink)

Safari 引擎：WebKit CSS 前缀：-webkit

引擎：WebKit

CSS 前缀：-webkit

Chrome 引擎：WebKit → Blink2 CSS 前缀：-webkit

引擎：WebKit → Blink2

CSS 前缀：-webkit

¹⁾ 2013 年 2 月 12 日，Opera（版本 15+）announces 他们从自己的引擎 Presto 迁移到名为 Blink 的 WebKit。

²⁾ 2013 年 4 月 3 日，Google（Chrome 版本 28+）announces 他们将使用基于 WebKit 的 Blink 引擎。

³⁾ 2018 年 12 月 6 日，Microsoft（Microsoft Edge 79+ 稳定版）announces 他们将使用基于 WebKit 的 Blink 引擎。

..这是很好的信息！那么不同的渲染引擎会忽略这些前缀吗？即 Firefox 会忽略 -msie、-o、-webkit； Webkit 会忽略 -moz、-o、-msie； ETC...？

@Hristo 是的，它不会将其中任何一个识别为有效的 CSS，因此它会忽略它们

JKirchartz 是正确的。其他浏览器将忽略彼此的 css 前缀。

Opera 正在转向的 WebKit 是 Chromium 版本，它本身正在变成 Blink。

shivisuper

Webkit 是 Safari 和 Chrome（以及其他，但这些是流行的）使用的 Web 浏览器渲染引擎。

CSS 选择器上的 -webkit 前缀是仅此引擎打算处理的属性，与 -moz 属性非常相似。我们中的许多人都希望这会消失，例如 -webkit-border-radius 将被标准 border-radius 取代，并且对于多个浏览器，相同事物不需要多个规则。这实际上是“预规范”功能的结果，这些功能旨在不干扰标准版本的出现。

对于您的更新：...不，它实际上与 IE 无关，至少在 9 之前的 IE 使用称为 Trident 的不同渲染引擎。

那么 -webkit- 是否可以像 Firefox 一样用于 CSS3 功能的高级呈现？

不，Firefox 使用称为 Gecko 的渲染引擎

@Hristo - Firefox 使用一些类似的属性，但它们被称为 -moz （对于 mozilla），它会在解析样式时忽略 -webkit 角色:)

CodeExpress

这已被回答并接受，但如果有人仍然想知道为什么今天的事情有点混乱，你必须阅读这个：

http://webaim.org/blog/user-agent-string-history/

它很好地说明了 gecko、webkit 和其他主要渲染引擎是如何演变的，以及是什么导致了当前混乱的用户代理字符串状态。

引用最后一段的 TL;DR 目的：

然后谷歌构建了 Chrome，Chrome 使用了 Webkit，它就像 Safari，想要为 Safari 构建页面，所以伪装成 Safari。于是Chrome使用了WebKit，冒充Safari，WebKit冒充KHTML，KHTML冒充Gecko，所有浏览器冒充Mozilla，Chrome自称Mozilla/5.0（Windows；U；Windows NT 5.1； en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13，用户代理字符串一团糟，几乎没用，每个人都假装成其他人，混乱比比皆是。

访问上面的链接，其内容丰富且最后的高潮很有趣。

Sunil Garg

-webkit- 只是 Chrome、Safari、Opera 和 iOS 浏览器适合的组。它们都有一个共同的祖先，所以它们的能力/限制（在运行 CSS 和 Javascript 时）通常仅限于该组。

开发人员会在 -webkit- 后面加上一些代码，这意味着代码只能在 Chrome、Safari、Opera 和 iOS 浏览器上运行。这是一个完整的列表：

-webkit-（Chrome、Safari、较新版本的 Opera、几乎所有 iOS 浏览器（包括 Firefox for iOS）；基本上，任何基于 WebKit 的浏览器）

-moz-（火狐）

-o-（旧的 WebKit 之前的 Opera 版本）

-ms-（Internet Explorer 和 Microsoft Edge）

edgerunner

终极问题... IE 支持 WebKit 吗？

有点儿。查看 Chrome Frame，它是一个用于 Internet Explorer 的插件，可以使用 Webkit 引擎。唯一的怪癖是您必须说服您的访问者安装插件。

更新

Chrome Frame 不再得到维护或支持……

不再支持 Chrome 框架。

是的。这充其量只是一个权宜之计。 8 年后，是时候让 IE 让位于适当的兼容浏览器了。

微软希望 IE 消失。出于向后兼容的目的，它随 Windows 10 一起提供。

Sotiris

WebKit 是一个布局引擎，旨在允许 Web 浏览器呈现网页。 WebKit 引擎提供了一组在窗口中显示 Web 内容的类，并实现了浏览器功能，例如当用户单击时跟随链接、管理后退列表以及管理最近访问的页面的历史记录。 WebKit 最初是作为 KHTML 的一个分支创建的，作为 Apple Safari 的布局引擎；它可移植到许多其他计算平台。它也用于谷歌的 Chrome 浏览器。 WebKit 的 WebCore 和 JavaScriptCore 组件在 GNU Lesser General Public License 下可用，而 WebKit 的其余部分在 BSD 风格的许可证下可用。

来源Wikipedia

有关布局引擎的更多信息，您可以查看 here

SLaks

Webkit 是 Chrome 和 Safari 使用的 HTML 渲染引擎。

它支持许多以 -webkit- 为前缀的自定义 CSS 属性。

JKirchartz

Webkit 是 Apple 的 Safari 浏览器和 Google 的 Chrome 中使用的 html/css 渲染引擎。带有 -webkit- 前缀的 CSS 值前缀是特定于 webkit 的，它们通常是 CSS3 或其他非标准化特性。

回答更新 2 w3c 是试图标准化这些东西的主体，他们编写规则，然后程序员编写他们的渲染引擎来解释这些规则。所以基本上 w3c 说 DIV 应该“以这种方式”工作，然后引擎编写者使用该规则来编写他们的代码，任何错误或对规则的错误解释都会导致兼容性问题。

recursive

Webkit 是流行浏览器 Safari 和 Chrome 以及其他浏览器中使用的渲染引擎。

AJADMIN.COM

作为网站设计师，我遇到的一个常见问题是很多人使用 IE6+。通常没什么大不了的，除了在 CSS 中，我必须添加多个渲染语法来解析每个浏览器的每个请求。如果有一个通用的 CSS 渲染设置，IE 可以像 Chrome/FF/Opera 和 webkit 一样轻松读取，那就太好了。 IE 的问题在于，如果我不使用所有正确的 CSS 样式和渲染，那么我的网站在使用除 IE 之外的所有浏览器时看起来和工作都很好。这会让 IE 的顽固客户感到不快。

例如：假设我需要一个 1px 的灰色边框，边框半径为 10%。对于 Chrome 等，我使用 webkit 属性。现在，对于 IE，我必须使用简单的旧 CSS 值“border: 1px solid #E5E5E5”和“border-radius: 10%”添加单独的 CSS 样式。并不总是保证所有 IE 浏览器版本都能获得积极的结果，但在大多数情况下，这种方法对我和其他许多人都适用。

CoyoteCMS

尽管这是一篇较旧的帖子，但还有另一种方法可以为旧版本的 Internet Explorer 进行渲染。 -webkit 作为 CSS Vendor Prefix，你还可以下载一些 JS 应用，并将它们放在 HTML 的 HEAD 的底部。

尝试使用 Modernizr、HTML5 Shiv 和 Respond.js。这些是惊人的 IE 兼容的 polyfill 脚本，它们使用了 polyfill，以及其他有助于在 IE9 及以下版本中更好地呈现 HTML5 元素的资源。

要使用这些 polyfill，只需添加 HTML 布尔逻辑来放置它们，如果浏览器低于所需的 IE 版本。示例代码是：

Nabeel khan

Webkit 是流行浏览器 Safari 和 Chrome 以及其他浏览器中使用的渲染引擎每个浏览器都由渲染引擎支持以绘制 HTML/CSS 网页。

IE → Trident（已停产） Edge → EdgeHTML（Trident 的清理分支） Firefox → Gecko Opera → Presto（自 2013 年 2 月起不再使用 Presto，现在考虑 Opera = Chrome） Safari → WebKit Chrome → Blink（WebKit 的一个分支） .

hamidfzm

关于 WebEngines 尤其是 webKit 及其开发人员的优秀文档，您可以在以下位置阅读：WebKit

什么是 WebKit，它与 CSS 有什么关系？

关注公众号

想领先一步获取最新的外包任务吗？

相似问题

平台

支持

联系我们