Question

Firefox 3.5现在支持nth- *伪类，这就是我用来定位Safari和Chrome的css的方法。现在Firefox也会读取这些内容，导致布局问题。有没有人知道如何专门针对FF 3.5 +？

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

Answer 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>

Answer 2

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

Answer 3

在“宗教”笔记中，我们不应该使用CSS来定位任何浏览器。不幸的是，由于IE在支持CSS功能（以及所有错误）方面落后，因此已经将hacks应用于给定浏览器的目标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>

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

Answer 4

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

Answer 5

My approach使用PHP类检测操作系统，浏览器和浏览器版本。您可以在任何操作系统上定位几乎任何浏览器的任何版本。

Answer 6

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

只需替换这部分：

是（ '火狐/ 2'）？克+” ff2'：是（'firefox / 3'）？g +'ff3'

这部分：

是（ '火狐/ 2'）？克+” FF2 '：是（' 火狐/ 3.5'）G +？ ff3_5'：是（'firefox / 3'）？g +'ff3'

应该做的伎俩

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

是（ '火狐/ 2'）？克+” FF2 '：是（' 火狐/ 3.5'）G +？ ff3_5 '：是（' 火狐/ 3.6'）G +？ ff3_5 '：是（' 火狐/ 3.8'）G +？ ff3_5'：是（'firefox / 3'）？g +'ff3'

Answer 7

这有效：

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

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

Answer 8

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

/* Firefox 3.5 and newer */

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

要测试它，您可以在我的实时CSS黑客测试网站上看到这些与其他许多版本的浏览器同时存在：http://browserstrangeness.bitbucket.org/css_hacks.html#firefox

享受！

CSS Hack to Target Firefox 3.5+？

8 个答案: