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ボーダースタイル

..。

なし
境界なし。計算された境界線の幅はゼロです。

IEは気にしません。border-width: 0追加で設定する必要があります。（またはborder: 0 none;）組み合わせた名前を使用する場合。

于 2012-07-22T14:39:09.273 に答える
0

CSSでは、borderは「none」の値を受け入れません。0に設定します。理由は、borderプロパティの存在は境界線があることを示しているため、「none」と言っても意味がありません。

また、HTMLには「img」の属性「border」はありません。

于 2012-07-22T13:11:55.330 に答える
0

それは私には少し奇妙に見えます。.clickableで別のクラスを使用し、「src」なしで「img」を使用しないようにしてください。

私が行ったことを見てください。クラス「.wish」をクラス「.alreadyWished」に置き換えるには、少しJSを使用する必要があるかもしれません。

<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 に答える