Question

据我所知，iWebkit主要是为了与Chrome和Safari一起使用而编写的。现在我在一个网站（用于桌面屏幕）中使用iwebkit，我希望它兼容Firefox和IE 9（以及更旧版本）。

现在我找到了firefox的webkit样式表，但我找不到一个IE浏览器，因为IE CSS样式与chrome和firefox差别很大，编辑IE的firefox样式表可能只需要花费大量的时间和精力（和另外，在Firefox不支持的firefox webkit css文件中有一些样式，比如border-image），所以我并不是懒惰。

所以我基本上想知道IE是否有这样的样式表，如果没有，为IE定制每个firefox / chrome / safari css属性和样式可能是一项非常艰巨的任务，因为这些属性不同在IE和firefox，chrome / safari之间很多。

关于如何让这个iWebkit样式表在IE6-10上工作的任何建议？

以下是我正在谈论的Firefox iWebkit样式表的链接：http://svn.trynull.com/iwebkitmozilla/tags/

Answer 1

你可以转到http://colorzilla.com/gradient-editor/，只需将iWebkit或Mozilla样式插入编辑器中，它就会吐出IE等价物。至于其他样式，例如-webkit-border-image，你可以只是w3school搜索它们，看看是否存在IE等价物。（在这种情况下，border-image将是等效的...）一个例子来自 Mozilla的：

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdd5df), color-stop
(0%,#6d84a2), color-stop(99%,#6d84a2));

IE

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdd5df',   
endColorstr='#6d84a2',GradientType=0 ); /* IE6-8 */

Answer 2

您可以使用Chrome相框。 https://developers.google.com/chrome/chrome-frame/

除此之外，iWebKit适用于chrome和safari，因为它们是基于 WebKit 的浏览器。（因此名称）CSS使用许多供应商特定的前缀。

这样的事情：

#leftnav a
{
    -webkit-border-image:url("../images/navlinkleft.png") 0 5px 0 13px;
    z-index:3;
    margin-left:-4px;
    padding-right:4px;
    -webkit-border-top-left-radius:16px;
    -webkit-border-bottom-left-radius:16px;
    -webkit-border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    float:left;
    border-width:0 5px 0 13px;
}

不会在IE上原生运行。您可以显着重写代码（甚至不仅仅是css，浏览器特定的功能），但为什么要在IE中开始使用iOS界面？

适用于IE 9及更早版本的iWebkit CSS

2 个答案: