a：链接没有填满整个 td 框答案

【问题标题】：a:link not filling whole td boxa：链接没有填满整个 td 框
【发布时间】：2013-09-25 21:56:27
【问题描述】：

我有一个表格，我希望每个单元格都可以点击。这有点工作，但似乎链接没有填满整个框，当我应用某人点击太靠近边缘的悬停效果时，这成为一个问题。有没有办法解决这个问题？

这是我的css

.dashboardMods td a {
  display: block;
  height:100%;
  width:100%;
}

.dashboardMods td:hover{
  background-color:#4297c2;
}

【问题讨论】：

【解决方案1】：

您的.dashboardMods td 可能会有一个内边距，这可以防止内部元素变得比width - (padding * 2) 大，因为内边距位于两侧。

此外，height: 100% 并不总是有效，具体取决于浏览器和 HTML 规范（怪癖模式）

【讨论】：

很遗憾，这不起作用。填充可能是问题，但剥离或添加它不会对链接产生积极影响。剥离使链接缩小，添加使其开箱即用。我也试图让这个响应，所以我不想设置特定的高度，以防链接比说的重量或高度更多。

【解决方案2】：

从<td> 中删除padding。相反，您可以将相同的填充添加到 <a> 以获得类似的效果。只是为了确定您也可以使用.dashboardMods a:hover 来代替更改背景。

【讨论】：

【解决方案3】：

试试这个：

.dashboardMods td{
  padding:0;
}
.dashboardMods td a{
  display: block;
  height:100%;
  width:100%;
  padding:0;
  margin:0;
  line-height:100%;
}

【讨论】：

这不起作用，这只会使链接变成细线而不是整个块。我不认为这与填充有任何关系，我之前已经从 td 中剥离了填充。抱歉没有早点说，没想到。 :)
你能在 jsfiddle 上创建一个例子吗？
试试这个：.dashboardMods td a{ padding:100%; }
我尝试创建一个小提琴，但我遇到了一些麻烦，因为我正在使用引导包装内的表格，并且 Ic 无法再次重新创建整个环境。我尝试添加 100% 填充，它使一切变得如此巨大，以至于你甚至找不到数字。哈哈
哈哈哈对不起！我不知道你是否在你的机器上本地工作，如果你不是，如果你能给网页链接可能会更容易