当高度= 100％时，什么会导致链接不填充表格单元格的整个高度？

Question

实施例

黄色代表链接/可点击区域。

CSS

#shipment-list a {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: inherit;
    background-color: yellow;
    margin: 0;
    padding: 0;
}

HTML

        <td>
            <a href="#">
                Jul 24, 2011 @ 1:05p.m.<br>
                (4 hours, 19 minutes ago)
            </a>
        </td>

我似乎无法reproduce it in a jsFiddle，但我无法将您链接到实际网页，因为它运行的是本地主机并包含一些机密信息。

知道可能导致这种情况的原因吗？

我在FF4和IE9中得到了相同的结果。

修改：了解what was causing the problem。仍然不知道如何解决它。 td基本上缩小到其内容，即使它不是那样出现的。我不想明确定义td的高度，所以我该如何解决这个问题呢？

Answer 1

答案已经以不同的名字发布了几次。

How can I get a div to fill a table cell vertically?

Make a DIV fill an entire table cell

注意：这些解决方案假定表格具有明确的高度。

在Chrome中，position: relative是您的朋友。它会强制<a>占据整个表格单元格的高度和宽度。遗憾的是，这还不足以让它在FF和IE中运行。 Check the demo

要使其在Chrome + FF中有效，您可以使用display: table代替display: block。 Check it out

虽然IE8和IE9都支持display: table，但他们不喜欢在此解决方案中使用它，除非您将<td>的高度设为100％，as seen in this third demo。如果您调整浏览器窗口的大小或表格的宽度，您会注意到链接未达到单元格的整个高度。这是因为该链接100％（<a>）为100％（<td>）300px（<table>），因此该链接最多为300px高。这是妥协，我不确定你是否能够解决这个问题。

Answer 2

也许这个表有一个cellpadding或者样式表中的其他地方有样式？这可能导致背景颜色和链接无法填满整个单元格。

Answer 3

虽然它可能不是最漂亮的解决方案，但我相信你可以把它放在一个div。

类似于

的东西

<td>
   <a href="#">
      <div class="tableElement">
         Jul 24, 2011 @ 1:05pm<br />
         (4 hours, 19 minutes ago)
      </div>
   </a>
</td>

然后只是修改你的css来设置div的样式以填充每个表元素的大小。

Answer 4

您可以使整个tr标签可点击。

<tr onclick="location.href='there';" style="cursor:pointer;">

Answer 5

这会有所帮助：CSS 100% Height。

Answer 6

试试这个：

td {
    height: 100%;
    vertical-align: top;
}
td a {
    display: table;
    height: 100%;
}

它应该至少在FF中起作用。