表格链接在 Firefox、IE8 中不起作用答案

【问题标题】：Table link not working in Firefox, IE8表格链接在 Firefox、IE8 中不起作用
【发布时间】：2012-05-14 18:52:11
【问题描述】：

我有一张有背景图片（精灵）的桌子。表格的 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 从百分比更改为像素，它似乎可以工作，但这会破坏我的精灵位置......那么我该怎么做才能使链接工作？

【问题讨论】：

标签： html css html-table href

【解决方案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;
}

DEMO.

【讨论】：