Question

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

以下按钮均未显示。按钮类被应用为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前面有一个空格，而那些没有显示的图像则没有。我想知道这可能是问题所在。 E.g：

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

（以及所有其他人）。

IE8中的样式相关问题

1 个答案: