CSS不会在Firefox上加载，适用于Chrome / Safari

Question

我的投资组合在4ormat上运行。我的网站is here。

我添加了一个自定义CSS，因此您可以将鼠标悬停在每个图片上并让它显示前/后。所以基本上是翻转效应。

这是我添加的自定义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>

我真的迷失了为什么它在Chrome和Safari上完美无缺，而且似乎不适用于Firefox。我知道这是可能的，因为this website使用与我相同的代码，它适用于FireFox。

Answer 1

custom_stylesheet.css over here中的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; 
}
/**/

请注意，background: url(');只需设置为'一个单引号''。

/*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; 
}
/**/

一旦我在桌面副本中对其进行了调整，我就制作了HTML＆amp;调试这一切的CSS似乎在Mac OS X 10.9.3上的FireFox 29中按预期工作：

另外 - 正如其他人所说 - 这里肯定有很多需要清理的地方。但是一旦将CSS加载到具有上下文着色的文本编辑器中，特定错误就非常明显了。请看BBEdit的以下屏幕截图，看看我的意思。哎呀，看看我上面错误样本中的上下文着色。

此外，这是你的CSS＆amp;通过它在Pastebin上的内部代码格式化工具在BBEdit中很好地格式化HTML：

• stylesheet.css
• custom_stylesheet.css
• tidy_index.html

清理代码＆amp;使其格式良好有助于很快清除这样的问题。