HTML <a> element does not fill the whole cell with 100% height</a>

Question

我有一张表，在'td'标签中我有一个链接（'a'元素）。我想要实现的是使整个'td'标签可以点击超链接。到目前为止我的解决方案：

<td class="wholeBlockLink">
    <a href="#">Torok, Zoltan</a>
</td>

CSS代码：

.wholeBlockLink a {
    display: block;
    width: 100%;
    height: 100%;
    font-weight: bold;
    text-decoration: none;
}

.wholeBlockLink:hover {
    background-color: #ffff66;
}

我附上一张图片，表明该元素没有填满单元格的整个高度：

如您所见，td标签的大小为96px x 37px，但a的元素大小为96px x 17px。因此，由于某种原因，width属性可以工作但高度不是。

有什么想法吗？提前谢谢。

Answer 1

如果你将表格和行的高度设置为100％，它应该修复你的锚点（只要表格的容器没有明确的高度设置）：

table, tr { height: 100%; }

Example

如果要将垂直对齐方式保持在中间位置，则需要添加额外的跨度：

<a href="#"><span>Torok, Zoltan</span></a>

并使用显示表和表格单元格：

.wholeBlockLink a {
    display:table; 
    width:100%;
    height:100%; 
}

.wholeBlockLink a span {
    display:table-cell;
    vertical-align:middle;
}

Example

Answer 2

您需要在css中进行一些更改

使用此

.wholeBlockLink{margin:0px; padding:0px;}
.wholeBlockLink a {
    display: block;
    width: 100%;
    height: 100%;
    font-weight: bold;
    text-decoration: none; background:#F00;
    display:block;
    padding:20px 0px;
    margin:0px;
}

.wholeBlockLink a:hover {
    background-color: #ffff66;
}

Answer 3

使用line-height与td height相同。 line-height:37px;

Answer 4

您需要显式设置父元素的高度，否则％计算没有参考点。

td高度为37px;

Answer 5

现在这可能看起来超级黑客，但只需改变你的＆＃34; a＆＃34;来自＆＃34;显示：块＆＃34;到＆＃34;显示：table＆＃34;。我想你不想弄乱填充，线高或任何类型的静态＆＃34;硬编码值。试试这个，它就可以了。

.wholeBlockLink a {
    display: table;
    width: 100%;
    height: 100%;
    font-weight: bold;
    text-decoration: none;
    background: cyan;
}

它适用于http://jsfiddle.net/WLaAg/