23

我需要做chrome/opera hack，因为客户端想要的字体替换脚本会破坏事情......这很可悲，但一切都在 IE6-7、FF2-3 和 Safari 中运行。我无法修复脚本本身，我只能使用 CSS 和 HTML 破解它。

我正在尝试做一些事情：

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

是否可以？

我看到了这种进行 chrome 特定修复的方式，例如：

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

这管用吗？有没有更简单的方法？歌剧呢？

谢谢！

4

6 回答 6

39

一种干净的 JavaScript 方法：http ://rafael.adm.br/css_browser_selector/

它将浏览器特定的类广告到您的 html 的 body 标签中，您可以在您的 css 中使用，例如：

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

希望这可以帮助。

于 2009-06-03T19:13:28.377 回答
14

避免 CSS hack。它们会破裂。

谷歌浏览器：

@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;
    }
}

让 CSS 仅适用于 Opera 11？

如何使 CSS 仅对 Opera 可见

面向未来的 LTE Opera 10 的 CSS hack

于 2011-08-22T08:36:30.340 回答
11

对于 Google（和 Safari），您可以简单地使用以下内容；

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

这将加载一个 webkit 特定的样式表。“类型”可以任意命名，但必须包含在内。

您只需按照自己的意愿继续创建样式表，所有非 webkit 浏览器都会忽略它。

您必须对 Opera 使用上述技巧。以下对我最有效：

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

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

于 2011-10-01T12:43:20.633 回答
3

我还没有测试过这个解决方案，但是根据这个博客条目，你可以为 Chrome 尝试以下操作：

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
{
     var chromeCss = document.createElement("link");

     chromeCss.rel = "stylesheet";
     chromeCss.href = "ChromeStyle.css";

     document.getElementsByTagName("head")[0].appendChild(chromeCss);
}
于 2009-06-03T15:54:17.703 回答
2

.ie - Internet Explorer（所有版本）
.ie10 - Internet Explorer 10.x
.ie9 - Internet Explorer 9.x
.ie8 - Internet Explorer 8.x
.ie7 - Internet Explorer 7.x
.ie6 - Internet Explorer
6.x。 ie5 - Internet Explorer 5.x
.gecko - Firefox（所有版本）、Camino、SeaMonkey
.ffxx - Firefox xx（用特定版本号更改 xx） new
.ff4 - Firefox 4.x
.ff3 - Firefox 3.x
.ff2 - Firefox 2.x
.opera - Opera（所有版本）
.opera12 - Opera 12.x
.opera11 - Opera 11.x
.opera10 - Opera 10.x
.opera9 - Opera 9.x
.opera8 - Opera 8.x
.konqueror - 征服者
.webkit - Safari、NetNewsWire、OmniWeb、Shiira、Google Chrome
.chrome - Google Chrome（所有版本）
.chromexx - Chrome xx（将 xx 更改为特定版本的数量）新
.safari - Safari（所有版本）新
.iron - SRWare铁

.[操作系统代码].[浏览器代码] .yourclass { padding-left:5px; font-size:14px }

body { background-color:#000 }
.ie8 body {background-color:#111 }（特定于 Internet Explorer 8.x）
.win.ie8 body { background-color:#222 }（特定对于 Internet Explorer 8.x，在 Microsoft Windows 所有版本上）
.opera body { background-color:#333 }（Opera 所有版本）
.ff15 body { background-color:#444 }（特定于 Firefox 15.x）
.linux .gecko body { background-color:#555 }（Firefox、Camino、SeaMonkey 所有版本，在 x11 和 Linux 上）

.ie7 #right, .ie7 #left { width:320px }

有关更多信息，请访问此链接 http://cssbs.altervista.org/

于 2013-06-28T07:13:16.930 回答
0

请记住：“用户代理嗅探是 baaaddd”

那不是，也永远不会是一个好习惯。

维护一个实施了用户代理嗅探的网站简直是一件痛苦的事。

如果它们数量很少或者您没有时间制作多个样式表，您应该更喜欢单独的样式表或 css hack。

对于 Opera，你可以使用这个技巧：

@media all and (-webkit-min-device-pixel-ratio:10000),
    not all and (-webkit-min-device-pixel-ratio:0) { 
     #id {
         css rule;
     }
 }

可悲的是，每个 Chrome css hack 也适用于 Safari。

除了旧版本的 Safari（<= safari3，如果我没记错的话），没有办法将 2 个渲染分开

于 2012-02-19T10:18:41.070 回答