Why an image still has a border in IE even with border set to none?

问题

With the following code, I get a border around my background image in IE7 to IE9. Why?

<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>

回答1:

That's a bug in IE. The CSS specs say

8.5.3 Border style

...

none
No border; the computed border width is zero.

IE doesn't care. You need to set border-width: 0 additionally. (Or border: 0 none;) if you want to use the combined name.

回答2:

That looks a bit weird to me. Why not use different classes on .clickable and avoid having an "img" without "src".

Take a look at what I did, you might need to use a bit of JS to replace the class ".wish" with the class ".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  */}

回答3:

In CSS, border does not accept the value of 'none'. Set it to 0. The reason is, the presence of the border property states that there is a border so it doesn't make sense to say 'none'.

Also, there is no attribute 'border' for 'img' in HTML.

来源：https://stackoverflow.com/questions/11598585/why-an-image-still-has-a-border-in-ie-even-with-border-set-to-none

标签

css

border

background-image