如何制作Chrome/Opera特定的样式表？

Question

我需要做chrome/opera hacks,因为客户想要的字体替换脚本会破坏事情......这很难过,但一切都在IE6-7,FF2-3和Safari中工作.我无法修复脚本本身,我只能使用CSS和HTML来破解它.

我正在努力做一些事情:

<!--[if IE 6]>
   <link rel="stylesheet" href="ie6.css" type="text/css" media="screen" />
<![endif]-->

可能吗？

我看到了这种做铬特定修复的方法,如:

body:nth-of-type(1) .elementOrClassName
{
/* properties go here */
}

这管用吗？有更简单的方法吗？歌剧怎么样？

谢谢!

Answer 1

它将浏览器特定的类广告到你的html的body标签,你可以在你的css中使用它:

.opera #thingie, .chrome #thingie {
  do: this;
}

希望这可以帮助.

Answer 2

避免CSS黑客攻击.他们会打破.

谷歌浏览器:

@media not all and (-webkit-min-device-pixel-ratio:0)
{  
    #example
    {
        width: 200px;
    }
}

苹果浏览器:

@media screen and (-webkit-min-device-pixel-ratio:0)
{
    #example
    {
        width: 200px;
    }
}

歌剧:

@media not screen and (1)
{
    #example
    {
        width: 200px;
    }
}

Answer 3

对于Google(和Safari),您只需使用以下内容即可;

<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari" />

这将加载webkit特定的样式表.'type'可以根据需要命名,但必须包含在内.

您可以随意创建样式表,所有非webkit浏览器都会忽略它.

你将不得不使用上面的黑客为Opera.以下对我来说效果最好:

@media not screen and (1)
    {
    #example
    {
    width: 200px;
    }
}

我用它来加载特定于浏览器的@ font-face声明.