基于浏览器和Wordpress缓存的可变CSS

Question

对于Wordpress博客的header.php文件，只有当浏览器是Firefox(Gecko(时，我才需要在CSS上添加一个项目。我制作了一个php脚本，一切都很好，但如果我启用缓存插件，这将保存第一个浏览器显示的静态页面。

所以我尝试使用普通CSS，但没有效果。以下是我在header.php上的代码：

<!--[if Gecko ]> <div class="class" id="section-header" style="background-image:url('background.png'); background-repeat:repeat-x; margin-top:-50px;"> <![endif]-->

<div class="class" id="section-header" style="background-image:url('background.png'); background-repeat:repeat-x">

因此，如果浏览器是基于Gecko的，请在顶部添加边距：-50像素，否则什么都不做。

为什么这个代码不起作用？

感谢

Answer 1

只需继续添加类名即可识别元素，并使用条件CSS来针对FF:

@-moz-document url-prefix() {
    div.class {
        margin-top:-50px;
    }
}

Answer 2

您可以使用Modernizr来检测浏览器类型

if($.browser.chrome) {
   $( "body" ).addClass( "chrome" );
} else if ($.browser.mozilla) {
   $( "body" ).addClass( "mozilla" );
} else if ($.browser.msie) {
   $( "body" ).addClass( "msie" );
}