IE8 中的样式相关问题

Question

我正在使用背景图像显示为按钮。该按钮在所有版本的 firefox、chrome、opera 等中都能很好地显示。但是，图像无法在 IE8 中呈现自身。只有图像没有显示，其他一些类样式被应用，例如宽度、高度等。 更令人困惑的是，在另一个页面中（尽管不同的类和样式表），相似比例的图像以相似的用法显示。图片格式为JPG。 我正在复制粘贴这两种情况的有效样式属性，如下面的萤火虫所示。

以下按钮均不显示。按钮类应用为 class="cart-button login"、class="cart-button update"、class="cart-button checkout" 和 class="cart-button continue" 并且在一些 div 中。

.cart-button{
    height: 28px;
    cursor: pointer;
    border: none;
    float: left;
}

.cart-button:hover{
        background-position: 0 -28px;
}

.login{
    width: 58px;
    background:url(/../../templates/animalcare/i/login.jpg)no-repeat;
    margin:0 0 20px 0;
    clear: both;
}

.update{
        width: 63px;
        background:url(/../../templates/animalcare/i/update.jpg)no-repeat;
        margin:0 0 20px 15px;
        float: left;
    }

.checkout{
        width: 77px;
        background:url(/../../templates/animalcare/i/checkout.jpg)no-repeat;
        float:right;
        margin:0 25px 30px 10px;
    }

.continue{
        width: 132px;
        background:url(/../../templates/animalcare/i/continue.jpg)no-repeat;
        float:right;
        margin:0 0 30px 0px;
    }

下面是唯一显示的图像按钮。它位于一张桌子内。它位于不同的样式表中 - 因此路径不同。

.add-to-cart{
    width:102px;
    height:28px;
    float:left;
    background:url(i/add_to_cart.jpg) no-repeat;
    cursor:pointer;
    border:none;
    margin:10px 0 5px 0;
}

.add-to-cart:hover{
    background-position:0 -28px;
}

Answer 1

我不禁注意到，显示的图像在no-repeat 前面有一个空格，而那些没有的则没有。我想知道这是否可能是问题所在。例如：

.login{
    width: 58px;
    background:url(/../../templates/animalcare/i/login.jpg) no-repeat;
                                                           ^
                                                           +-- add this space
    margin:0 0 20px 0;
    clear: both;
}

（以及所有其他人）。