Jquery CSS赢得'；t在Firefox上加载，在Chrome/Safari上工作

我有我的投资组合。我的网站

我添加了一个自定义CSS，这样你可以将鼠标悬停在每个图像上，让它显示一个before/after。所以本质上是一种翻滚效应

这是我添加的自定义CSS：

#menu .item.selected a{ background: #444; }

::-moz-selection{ background: #A5A29F; color:#fff; text-shadow: none; }
::selection { background:#A5A29F; color:#fff; text-shadow: none; }
.rollover a{
   display: block;
   text-indent: -9999px;
   margin: auto auto auto auto;
   cursor: pointer;
   outline: transparent solid 0px;
} 


#example a{
    height: 550px;
    width: 450px;  
    background: url('www.example.com')
    no-repeat right top;
}
#example a:hover,
#example a:active{
   background-position: 0 0; 
}

我上传了每个图像作为自定义HTML文本，并将其用作代码-

<div class="text_content">
     <div class="rollover" id="gold">
        <a href="http://a1.format-assets.com/image/private/s--K-oDqQbt--    /c_fill,g_center,h_550/a_auto,fl_keep_iptc.progressive,q_95/161188-8364422-gold.jpg">

        </a>
        </div>
PHOTO BY STEFAN B.
</div>

斯蒂芬B。

---

我真的不明白为什么它能在Chrome和Safari上完美地工作，而在Firefox上却不起作用。我知道这是可能的，因为它使用的代码与我几乎相同，并且在FireFox上也可以使用。

您的CSS在

自定义样式表.CSS

中有一个输入错误。问题在于这段CSS代码：

/*This is for you Matt*/
#giveIDnamehere a{
    height: 550px;
    width: ; /*Set half the image width here*/ 
    background: url('); /*Link to image here*/
    no-repeat right top;
}
#models a:hover,
#models a:active{
   background-position: 0 0; 
}
/**/

注意

背景：url（'）

只需设置为一个单引号

，

，而它应该是

'

在我用HTML和CSS制作的一个桌面副本中进行了调整，以调试这一点，在Mac OS X 10.9.3上的FireFox 29中，一切似乎都按照预期工作：

正如其他人所指出的，这里肯定有很多东西需要清理。但是，一旦CSS加载到带有上下文着色的文本编辑器中，具体的错误就非常明显了。请看下面BBEdit的屏幕截图，了解我的意思。见鬼，看看我上面的错误示例中的上下文颜色

此外，以下是通过Pastebin上的内部代码格式化工具在BBEdit中很好地格式化的CSS和HTML：

---

清理代码并使其格式良好有助于快速解决此类问题。

它在其他浏览器（如Safari、Opera等）中有效吗？您必须向我们解释“不完美工作”的含义。哪一部分坏了？不要期望我们在不同的浏览器中打开您的代码，看到与您相同的问题。@Timmah它在Safari中工作，我没有检查其他的问题。如果它在IE或Opera中不起作用，只要我能让它在Firefox中起作用就行了。看看你的Firefox控制台。CSS选项卡中有各种各样的

未知属性-声明被删除
错误和警告。@JakeGould，哦，我确信这是显而易见的。。。我只是想让OP去做+你的回答让我很惊讶。哇，我真不敢相信这就是问题所在。我根本没有意识到这是个问题。谢谢，非常感谢。后面的
no repeat
行也不正确，
width
应该有一个值。@AndyG Yes。这里有很多东西要清理。但这是原始海报要解决的任务。也许这个简单的错误会教会他如何更好地调试代码。谢谢各位，我一定会尝试并学习如何更好地清理代码。很高兴这个主要问题得到了解决。非常感谢您的帮助。@user3697775请检查我的最新编辑。底部是指向在Pastebin上清理的代码的链接。为了解决这个问题，我必须这样做，所以你也可以拥有它们。请学习干净的格式代码；它可以帮你省去很多麻烦！
/*This is for you Matt*/
#giveIDnamehere a{
    height: 550px;
    width: ; /*Set half the image width here*/ 
    background: url(''); /*Link to image here*/
    no-repeat right top;
}
#models a:hover,
#models a:active{
   background-position: 0 0; 
}
/**/