CSS Hack 瞄准 Firefox 3.5+？答案

【问题标题】：CSS Hack to Target Firefox 3.5+?CSS Hack 瞄准 Firefox 3.5+？
【发布时间】：2010-11-12 15:48:29
【问题描述】：

Firefox 3.5 现在支持 nth-* 伪类，这是我用来将我的 css 用于 Safari 和 Chrome 的。现在 Firefox 也会读取这些内容，从而导致轻微的布局问题。有谁知道专门针对 FF 3.5+ 的方法？

BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ { 
     height:19px 
}

【问题讨论】：

对我来说这听起来像是对 css 的错误使用，如果您必须分别针对每个浏览器。特别是如果您谈论的浏览器都了解某个 CSS3 功能。因为我不知道你的上下文，我可能是错的。
tharkun，使用 CSS hack 来针对特定的浏览器（让渲染的页面在所有浏览器中看起来都一样）是司空见惯的。设计师生活中的不幸事实。
您为什么要尝试通过 hack 来解决您的问题？向我们展示实际的 CSS 代码，我们可以告诉您如何修复它。
我应该去设计师论坛，但这里有一个例子： BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ { height :19px } 这也是现在在 FF 3.5 中读取的，我需要不同的高度值。
@nonagon：我尝试编写应用程序、创建布局并因此编写不需要任何 hack 的 CSS。 IE6 并不总是可以，但对于其余的，是的！

标签： css firefox

【解决方案1】：

这个怎么样，我在 Safari 4 中测试，高度为 19px，在 Firefox 3.5 中高度显示为 39px。

<style>

BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ { height:19px }      
BODY:nth-of-type(1) #topsearch input[type=submit], x:-moz-any-link, x:default { height: 39px; }

</style>

【讨论】：

【解决方案2】：

CSS Browser selector 让您可以编写针对特定浏览器的 CSS，而无需担心黑客攻击。我不能高度推荐它。

【讨论】：

@Bruce - 这是一个不错的工具！它基本上与我发布的内容类似，但将类添加到 html 元素。由于这是最终的顶级元素，因此只需指定 .gecko 或 .win 或 .safari 就可以像魅力一样处理所有事情！
@Bruce - 一个小问题......据我所知（目前）该工具不会为 ff3-5 提供特殊类。也就是说，您可以专门针对 safari 和 chrome。
我知道这个 posrt 真的很老了，但我才发现它。太棒了，谢谢！
帖子可能已经过时，但解决方案与今天一样重要。

【解决方案3】：

在“宗教”方面，我们不应该使用 CSS 来定位任何浏览器。不幸的是，由于 IE 在支持 CSS 功能（以及所有错误）方面落后，黑客已经针对给定浏览器应用了目标 CSS。

IE 使用的条件注释...虽然丑陋...确实提供了一种方便的机制来定位浏览器（和版本）...我几乎希望其他浏览器支持这一点。

我见过一些网站这样做...这是一种处理各种浏览器定位的有趣方法。

<head>
  <style>
    body.safari form input{
      /*special styles for Safari*/
    }
    body.firefox form input{
      /*special styles for Firefox*/
    } 
    body.firefox.v3-5 form input{
      /*special styles for Firefox 3.5*/
    } 
</style>
</head>
<body>
  <script>
    //run code here, that sets the class and or id attribute on the body tag...
  </script>

从长远来看，它们都是黑客......这取决于你愿意接受什么样的黑客;-)

【讨论】：

【解决方案4】：

顺便说一句，“BODY:nth-of-type(1) ...”语法破坏了 YUI 压缩器缩小 CSS 的能力。相反，我使用“body:first-of-type ...”。

【讨论】：

【解决方案5】：

My approach 使用 PHP 类来检测操作系统、浏览器和浏览器版本。您可以针对任何操作系统上几乎任何浏览器的任何版本。

【讨论】：

【解决方案6】：

使用http://rafael.adm.br/css_browser_selector/

只需替换这部分：

是('firefox/2')?g+' ff2':is('firefox/3')?g+' ff3'

对于这部分：

是('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3_5':is('firefox/3')?g+' ff3'

这应该可以解决问题

PS：如果您还想捕捉其他 3.x 版本，您可能需要添加：

是('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3_5':is('firefox/3.6')?g+' ff3_5':is('firefox/3.8')?g+' ff3_5':is('firefox/3')?g+' ff3'

【讨论】：

【解决方案7】：

这行得通：

@media screen and (-webkit-min-device-pixel-ratio:0){
    #topsearch input[type=submit] { height:19px; }
}}

这针对的是较新的 WebKit 浏览器，而不是 Gecko 或 Trident。

【讨论】：

【解决方案8】：

过去几年发生了很多变化。对于 Firefox 3.5+ hack，这是我为此目的创建的：

/* Firefox 3.5 and newer */

_:-moz-handler-blocked, :root .selector { property:value; }

要对其进行测试，您可以在我的现场 CSS hacks 测试站点上看到这些以及许多其他不同版本的浏览器的实时情况：http://browserstrangeness.bitbucket.org/css_hacks.html#firefox

享受吧！

【讨论】：