0

使用以下代码，我在 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>
4

3 回答 3

1

这是IE中的一个错误。CSS规范说

8.5.3 边框样式

...

none
无边界；计算的边框宽度为零。

IE 不在乎。您需要border-width: 0另外设置。（或border: 0 none;）如果您想使用组合名称。

于 2012-07-22T14:39:09.273 回答
0

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

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

于 2012-07-22T13:11:55.330 回答
0

这对我来说有点奇怪。为什么不在 .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  */}
于 2012-07-22T09:52:42.777 回答