CSS无法在Firefox上加载，但可以在Chrome / Safari上运行

Question

我的投资组合在4ormat上运行。 我的网站在这里 。

我添加了一个自定义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上运行。 我知道这是可能的，因为该网站使用与我几乎相同的代码，并且可以在FireFox上运行。

Answer 1

有一个在你的CSS一个错字custom_stylesheet.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和CSS进行调试，一切似乎都可以在Mac OS X 10.9.3的FireFox 29中正常运行：

而且，正如其他人指出的那样，这里肯定有很多事情需要清理。 但是，一旦将CSS加载到具有上下文颜色的文本编辑器中，该特定错误就非常明显。 查看BBEdit的以下屏幕截图，了解我的意思。 哎呀，看看我上面的错误示例中的上下文颜色。

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

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

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