Question

使用以下代码，我在IE7到IE9的背景图像周围得到一个边框。为什么呢？

<tr>
    <td class="wishes">
        <a class="clickable">
            <img class="alreadyWished" border="0" width="19" height="16"
                alt="Already Wished"/><br />
            Already Wished
         </a>
     </td>
</tr>

<style>
.clickable
{
    outline:none;
    cursor:pointer;
    border:none;
}

.wish
{
    background-image:url(../images/wished.jpg);
    background-repeat:no-repeat;
    border:none;
    outline:none;
}

.alreadyWished
{
    background-image:url(../images/alreadyWished.jpg);
    background-repeat:no-repeat;
    border:none;
    outline:none;
}
</style>

Answer 1

这是IE中的一个错误。 CSS specs say

8.5.3边框样式

...

无
         无边界;计算出的边框宽度为零。

IE不关心。您还需要设置border-width: 0。（或border: 0 none;）如果您想使用组合名称。

Answer 2

这对我来说有点奇怪。为什么不在.clickable上使用不同的类，避免使用没有“src”的“img”。

看看我做了什么，您可能需要使用一些JS来替换“.wish”类与类“.alreadyWished”

<tr>
<td class="wishes">
    <a class="clickable .wish"></a>
 </td>

.clickable.wish { background:url("wished.jpg") no-repeat center left; padding-left:25px; /* padding equal to your width of the background image + 10-15px  */}
.clickable.alreadyWished { background:url("alreadyWished.jpg") no-repeat center left; padding-left:25px; /* padding equal to your width of the background image + 10-15px  */}

Answer 3

在CSS中，border不接受'none'的值。将其设置为0.原因是，border属性的存在表明存在边界，因此说'none'是没有意义的。

此外，HTML中的'img'没有属性'border'。

为什么图像在IE中仍然有边框，即使边框设置为无？

3 个答案: