340

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

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

更新

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

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

更新 2

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

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

4

14 回答 14

221

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

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

  • IE →三叉戟(停产)
  • 边缘 →EdgeHTML(Trident 的清理分支)(Edge在 2019 年切换到Blink )
  • 火狐 →壁虎
  • 歌剧 → Presto(自 2013 年 2 月起不再使用 Presto,考虑 Opera = Chrome,因此现在Blink
  • Safari → WebKit
  • Chrome → BlinkWebkit的一个分支)。

有关不同领域的比较列表,请参阅Web 浏览器引擎的比较。

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

不是原生的。

于 2010-08-12T13:38:39.757 回答
145

除了@KennyTM所说的:

  • IE
  • 边缘
  • 火狐
    • 引擎:壁虎
    • CSS 前缀:-moz
  • 歌剧
    • 引擎:PrestoBlink 1
    • CSS 前缀:-o(Presto)和-webkit(Blink)
  • 苹果浏览器
    • 引擎:WebKit
    • CSS 前缀:-webkit
  • 铬合金

1) 2013 年 2 月 12 日,Opera(版本 15+)宣布他们从自己的引擎 Presto 迁移到名为Blink的 WebKit 。

2) 2013 年 4 月 3 日,Google(Chrome 版本 28+)宣布他们将使用基于 WebKit 的Blink引擎。

3) 2018 年 12 月 6 日,微软(Microsoft Edge 79+ 稳定版)宣布他们将使用基于 WebKit 的Blink引擎。

于 2010-08-12T13:46:02.750 回答
44

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

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

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

于 2010-08-12T13:32:49.503 回答
38

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

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,用户代理字符串一团糟,几乎没用,每个人都伪装成其他人,混乱比比皆是。

于 2012-09-20T19:28:35.763 回答
11

-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)

于 2018-07-22T05:10:15.003 回答
9

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

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

更新

Chrome Frame 不再得到维护或支持……</p>

于 2010-09-20T22:28:09.267 回答
8

WebKit 是一个布局引擎,旨在允许 Web 浏览器呈现网页。WebKit 引擎提供了一组在窗口中显示 Web 内容的类,并实现了浏览器功能,例如当用户单击时跟随链接、管理后退列表以及管理最近访问的页面的历史记录。

WebKit 最初是作为 KHTML 的一个分支创建的,作为 Apple Safari 的布局引擎;它可移植到许多其他计算平台。它也用于谷歌的 Chrome 浏览器。

WebKit 的 WebCore 和 JavaScriptCore 组件在 GNU Lesser General Public License 下可用,而 WebKit 的其余部分在 BSD 风格的许可证下可用。

来源维基百科

有关布局引擎的更多信息,您可以查看此处

于 2010-08-12T13:33:42.393 回答
7

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

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

于 2010-08-12T13:32:30.023 回答
6

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

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

于 2010-08-12T13:33:25.993 回答
5

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

于 2010-08-12T13:32:45.123 回答
4

作为网站设计师,我遇到的一个常见问题是很多人使用 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 浏览器版本都能获得积极的结果,但在大多数情况下,这种方法对我和其他许多人都适用。

于 2013-11-14T22:29:58.437 回答
3

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

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

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

<head>
<!-- HEAD Elements -->  
<script src="path/to/modernizr.js" type="text/javascript"></script>
<!--[if lt IE 6]>
  <script src="path/to/HTMLSiv.js" type="text/javascript">
  </script>
  <script src="path/to/respond.js" type="text/javascript">
  </script>
<![endif]-->
</head>

于 2015-03-14T21:07:32.973 回答
2

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

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

于 2018-02-23T10:06:10.093 回答
1

关于WebEngines特别是webKit它的开发者的一个很好的文档,你可以阅读: WebKit

于 2013-12-13T12:41:40.150 回答