某些 CSS 精灵未在 Firefox、Chrome 和 IE 上显示？

Question

我在网站的几个页面上使用 css-sprites 作为导航按钮，当鼠标悬停在上面时，部分图像会变暗。所有这些按钮上都有文字。在我刚刚将文本写到图像上之前一切正常，但我想将文本添加到我的 html 以便它可以更好地呈现给任何放大页面的人。然而，这样做现在导致精灵的图像不会出现在 Firefox、Chrome 和 IE 中（在 Safari 中仍然可以正常工作）。

显然，我认为是将文本添加到代码中导致的，但现在即使我删除了文本，图像仍然没有显示。我真的很难弄清楚为什么会这样，尤其是当我有另外 2 个页面使用 sprite 并且它们仍然工作正常时。唯一的区别是我没有尝试将文本移动到我在这些页面上的代码中。

非常感谢任何建议

破碎精灵代码：

.row5
{
width: 940px;
height: 220px;
position: absolute;
left: 10px;
top: 1215px;
}

.box1
{
background: url(http://www.sungblue.com/Images/box1sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
}

.boxtext
{
font-family: elron;
color: rgba(255,255,255,1.00);
font-size: 18px;
width: 306px;
height: 18px;
position: absolute;
top: 175px;
left: 0px;
text-align: center;
}

.box1:hover
{
background-position: 0 -201px;
}

.box2
{
background: url(http://www.sungblue.com/Images/box2sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 317px;
}

.box2:hover
{
background-position: 0 -201px;
}

.box3
{
background: url(http://www.sungblue.com/Images/box3sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 634px;
}

.box3:hover
{
background-position: 0 -201px;
}

.row6
{
width: 940px;
height: 220px;
position: absolute;
left: 10px;
top: 1425px;
}

.box4
{
background: url(http://www.sungblue.com/Images/box4sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
}

.box4:hover
{
background-position: 0 -201px;
}

.box5
{
background: url(http://www.sungblue.com/Images/box5sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 317px;
}

.box5:hover
{
background-position: 0 -201px;
}

.box6
{
background: url(http://www.sungblue.com/Images/box6sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 634px;
}

.box6:hover
{
background-position: 0 -201px;
}

<div class='row5'>
    <a href='http://www.sungblue.com/weddings.html'>
        <div class='box1'>
            <div class='boxtext'>WEDDINGS</div>
        </div>
    </a>
    <a href='http://www.sungblue.com/prewedding.html'>
        <div class='box2'>
            <div class='boxtext'>ENGAGEMENT SHOOTS</div>
        </div>
    </a>
    <a href='http://www.sungblue.com/contact.html'>
        <div class='box3'>
            <div class='boxtext'>CONTACT</div>
        </div>
    </a>
</div>
<div class='row6'>
    <a href='http://sungbluephotography.zenfolio.com'>
        <div class='box4'>
            <div class='boxtext'>CLIENT AREA</div>
        </div>
    </a>
    <a href='http://www.sungblue.com/prices.html'>
        <div class='box5'>
            <div class='boxtext'>PRICING</div>
        </div>
    </a>
    <a href='http://sungbluephotography.zenfolio.com/blog/'>
        <div class='box6'>
            <div class='boxtext'>BLOG</div>
        </div>
    </a>
</div>

这是我的 sprite 正在工作的其他页面的代码：

.row3
{
width: 940px;
height: 288px;
position: absolute;
left: 10px;
top: 335px;
text-align: center;
}

.box1
{
background-image: url(http://www.sungblue.com/Images/weddingbox1sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 0px;
}

.boxtext
{
width: 465px;
height: 18px;
position: absolute;
left: 0px;
top: 260px;
font-family: elron;
font-size: 18px;
color: rgba(255,255,255,1.00);
text-align: center;
}

.box1:hover
{
background-position: 0 -289px;
}

.box2
{
background-image: url(http://www.sungblue.com/Images/weddingbox2sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 475px;
}

.box2:hover
{
background-position: 0 -289px;
}

.row4
{
width: 940px;
height: 288px;
position: absolute;
left: 10px;
top: 633px;
text-align: center;
}

.box3
{
background-image: url(http://www.sungblue.com/Images/weddingbox3sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 0px;
}

.box3:hover
{
background-position: 0 -289px;
}

.box4
{
background-image: url(http://www.sungblue.com/Images/weddingbox4sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 475px;
}

.box4:hover
{
background-position: 0 -289px;
}

Answer 1

问题出在图片本身。由于它们具有 .jpg 扩展名，因此浏览器试图将它们视为 JPEG 文件，但事实并非如此。它们是 PNG 文件。

解决方案：将它们重命名为 .png，或将它们转换为实际的 JPEG 文件。

某些 CSS 精灵未在 Firefox、Chrome 和 IE 上显示？

Some CSS sprites not showing on Firefox, Chrome and IE?

css

firefox

internet-explorer

google-chrome

css-sprites