0

背景画像（スプライト）を持つテーブルがあります。テーブルの td は、スプライト イメージの位置に対するリンクとして機能します。私はそれを次のように持っています：

CSS:

table.populair {
    background-image:url(populair.png);
    background-position:27px 27px;
    background-repeat:no-repeat;
}


table td {
    border:solid 1px #ccc;
    border-radius:4px;
    cursor:pointer;
}

td a{
    display:block;
    width: 105%;
    height: 105%;
    margin-left: -3px;
    margin-top: -2px;
        z-index:15;
}

HTML:

<table class="populair" border="0" bordercolor="#FFCC00" width="647" height="322" cellpadding="0" cellspacing="27">
            <tr>
                <td><a href="http://www.link.com/"></a>
                </td>
                <td><a href="http://www.link.com/"></a>
                </td>
                <td><a href="http://www.link.com/"></a>
                </td>
                <td><a href="http://www.link.com/"></a>
                </td>
                <td class="none">
                </td>
            </tr>
            </table>

Chrome (リンクはクリック可能) では動作しますが、Firefox と IE8 では動作しません。奇妙なことに、td a をパーセンテージからピクセルに変更すると機能するように見えますが、それによってスプライトの位置が台無しになります...では、リンクを機能させるにはどうすればよいでしょうか?

4

1 に答える 1

1

子アイテムに % を使用するには、親要素 (td) の幅と高さを割り当てる必要があります。

table.populair {
    background-image:url(populair.png);
    background-position:27px 27px;
    background-repeat:no-repeat;
}


table tr td {
    border:solid 1px #ccc;
    border-radius:4px;
    display:table-cell;
    width: 10%;
    height: 100%;
}

table tr td a{
    display:block;
    width: 100%;
    height: 100%;
    margin-left: -3px;
    margin-top: -2px;
    z-index:15;
}​

デモ。

于 2012-05-05T13:57:26.630 に答える