WebKit是什么?它与CSS有什么关系?

最近，我看到一些带有“webkit”标签的问题。这类问题通常是基于web的问题，与CSS、jQuery、布局、跨浏览器兼容性问题等有关…

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

更新

从目前的答案来看…WebKit是一个HTML/CSS浏览器渲染引擎Safari/Chrome。IE/Opera/Firefox有这样的引擎吗?使用其中一种引擎的优缺点有什么不同?我可以在Firefox中使用WebKit功能吗?

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

更新2

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

那么，是否存在某种项目或移动到所有浏览器都将使用的标准渲染引擎?HTML5会解决跨浏览器兼容性问题吗?

361570 次浏览
小开

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

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

小开

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

小开

Webkit是Safari和Chrome使用的web浏览器渲染引擎(在其他浏览器中，但这些是流行的)。

CSS选择器上的-webkit前缀是只有这个引擎打算处理的属性，非常类似于-moz属性。我们中的许多人都希望这种情况消失，例如-webkit-border-radius将被标准的border-radius所取代，并且您将不需要为多个浏览器的相同设置多个规则。这实际上是“预规范”特性的结果，这些特性的目的是在标准版本出现时不干扰标准版本。

关于你的最新情况:……不，它实际上与IE无关，IE至少在9之前使用了不同的渲染引擎三叉戟。

小开

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

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

小开
WebKit是一个布局引擎设计 允许网页浏览器渲染网页 页面。WebKit引擎提供了一个 显示web内容的类集 在windows下，实现浏览器 时跟随链接等特性 由用户单击，管理一个 后向列表，并管理一个

.最近访问的页面历史 WebKit最初被创建为一个 fork的KHTML作为布局引擎 苹果的Safari;它对许多人来说是便携的 其他计算平台。它也是 在谷歌的Chrome浏览器中使用 WebKit的WebCore和JavaScriptCore 组件在GNU下是可用的 一般公共许可证，以及 WebKit的其余部分可以在 bsd风格的许可。< / p >

源维基百科

关于布局引擎的更多信息，你可以查看在这里

小开
最佳答案

更新:所以很明显，WebKit是一个HTML/CSS浏览器渲染引擎Safari/Chrome。IE/Opera/Firefox有这样的引擎吗?使用其中一种引擎的优缺点有什么不同?我可以在Firefox中使用WebKit功能吗?

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

有关不同区域的比较列表，请参见web浏览器引擎的比较。

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

不是本地。

小开

除了@KennyTM所说的:

  • < >强即
    • 引擎:三叉戟
    • CSS-prefix: -ms
      • 李< / ul > < / >
    • < >强边缘
      • 引擎:EdgeHTML→眨眼3.
      • CSS-prefix: -ms
        • 李< / ul > < / >
      • < >强火狐
        • 引擎:壁虎
        • CSS-prefix: -moz
          • 李< / ul > < / >
        • < >强歌剧
          • 引擎:快速→眨眼1
          • CSS-prefix: -o (Presto) and -webkit (Blink)
            • 李< / ul > < / >
          • < >强狩猎
            • 引擎:WebKit
            • CSS-prefix: -webkit
              • 李< / ul > < / >
            • <强>铬
              • 引擎:WebKit→眨眼2
              • CSS-prefix: -webkit
                • 李< / ul > < / >

              2013年2月12日，Opera (version 15+) 宣布从他们自己的引擎Presto转移到名为眨眼的WebKit上。

              2013年4月3日谷歌(Chrome版本28+)宣布他们将使用基于webkit的眨眼引擎。

              2018年12月6日微软(Microsoft Edge 79+稳定)宣布他们将使用基于webkit的眨眼引擎。

小开

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

种。看看Chrome Frame，它是一个用于Internet Explorer的插件，使其使用Webkit引擎。唯一的问题是你必须说服你的访问者去安装插件。

更新

Chrome框架不再维护或支持…

小开

这个问题已经得到了回答和接受，但如果有人仍然想知道为什么今天的事情有点混乱，你必须读这篇文章:

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，用户代理字符串完全是一团糟，几乎没用，每个人都假装成其他人，混乱充斥着。

小开

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

小开
关于WebEngines特别是webKit及其开发人员的良好文档，您可以在以下地方阅读: WebKit < / p >
小开

尽管这是一篇较老的文章，但对于较旧版本的Internet Explorer，还有另一种渲染方法。-webkit作为CSS的供应商前缀，你也可以下载一些JS应用程序，并把它们放在HTML的HEAD底部。

尝试使用Modernizr, HTML5 Shiv和response .js。这些都是惊人的兼容IE的polyfill脚本，使用polyfill，和其他资源，这将有助于更好地呈现HTML5元素在IE9和以下。

要使用这些填充，只需添加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>

小开
Webkit是流行浏览器Safari和Chrome以及其他浏览器中使用的渲染引擎 每个浏览器都有一个渲染引擎来绘制HTML/CSS网页

IE→Trident(停止) Edge→EdgeHTML (Trident的清理叉) 火狐→壁虎 Opera→Presto(从2013年2月开始不再使用Presto，现在考虑Opera = Chrome) Safari→WebKit Chrome→Blink (WebKit的一个分支).

小开

-webkit-只是Chrome, Safari, Opera和iOS浏览器适合的一个组。他们都有一个共同的祖先，所以他们的能力/限制(当涉及到运行CSS和Javascript时)通常仅限于这个组。

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

-webkit- (Chrome, Safari，更新版本的Opera，几乎所有的iOS浏览器(包括iOS的Firefox);基本上，任何基于WebKit的浏览器)

-moz- (Firefox)

-o-(旧的，pre-WebKit, Opera版本)

-ms- (Internet Explorer和Microsoft Edge)


提交答案