我有一个具有以下基本结构的表：
<table>
<thead>
<tr>
<th>
<a href="">Header Text</a>
</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>Random text</td>
...
</tr>
...
</tbody>
</table>
可以单击a链接标记以对表重新排序的位置。
我想定义一些 CSS，以便无论 a 标签中的文本跨越多少行，所有a链接标签都将占据其包含th标签的 100% 的高度，以便您可以单击表标题中的任意位置对特定列进行排序。
我尝试使用以下CSS，但它仅适用于Chrome：
th {
height: 1px;
}
th a {
height: 100%;
}
我也知道你可以使用 JavaScript 来解决这个问题，但如果可能的话，我真的很想避免这种情况。换句话说，仅HTML/CSS的解决方案将是理想的。
我必须支持IE回到IE8和几乎所有版本的Chrome，FF等。有人对如何做到这一点有任何建议吗？
谢谢。
编辑：旧版本依赖于复制链接并隐藏副本，同时在文档流之外调整另一个副本的大小，但我们可以做得更好......这里更好。
您可以通过::before在相对现代的Chrome（39.0 +）和Firefox（31.2 +）以及最新版本的Safari for Windows（5.1.7）中工作。
在IE中，它不会完全正确调整它的大小（与加倍相同的问题），但是通过折腾overflow:hidden，使height大于100%，并通过巧妙的定位添加::after，您可以相当轻松地缓解此问题。
如果将高度设置回 100%，则可以强制条带 IE 必须可见。
显然，悬停时的背景阴影纯粹是为了演示目的。
此外，我还想出了如何让老狐（FF 3.5.2，欢迎来到CSS3）干净利落地降级。这就是.safety的目的，实际上比我预期的要容易。
body{
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
.safety{
position:relative;
}
th{
position:relative;
background-color:rgba(255,255,255,0.5);
overflow:hidden;
}
a{
display:block;
}
a:hover{
text-decoration:none;
background-color:rgba(255,0,0,0.3);
}
a::before{
content:"";
position:absolute;
top:0;
left:0;
height:900%;
width:100%;
}
a::after{
content:"";
position:absolute;
bottom:0;
right:0;
height:900%;
width:100%;
}
a:hover::before{
background-color:rgba(0,0,255,0.3);
}
a:hover::after{
background-color:rgba(0,255,0,0.3);
}<span class="safety">
<table>
<tr>
<th><a href="">The Link</a></th>
<th><br /><br />next cell<br /><br /></th>
<th><a href="">The Link 2<br />Naturally Taller</a></th>
<th>next cell</th>
</tr>
<tr>
<th>streeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeetch</th>
<th>next cell</th>
<th>next cell</th>
<th>next cell</th>
</tr>
</table>
</span>为什么是伪元素？
因为我们没有从文档流中删除链接本身，所以链接仍然能够贪婪地抓住它自己需要的屏幕空间。
而且由于我们可以分别定位和调整它们的大小，因此我们可以在不删除链接的情况下通过浏览器选择100%;含义的方式来缓解任何错误。
为什么你不能简单地说height:100%;
首先，a是一个inline元素，这意味着它的大小取决于其内容。因此，在它本身上调整大小不会失败，而不会使其成为block或inline-block。
但是，在这种情况下，这只能使width:100%;起作用。
如果你想有一个height:100%;你必须声明一个非内部相对庄园中的100%是什么，可以向下传播到基于百分比的元素。这意味着没有百分比（在屏幕单位之外vh, vw, vmin, vmax），否则当某些东西向上缩放其大小，创建更多滚动条，然后在无限循环中向上缩放其大小时，您将获得"正确"的行为。
但是，您可以通过 position:absolute 绕过它，因为这会从正常流中删除元素 - 因为它不允许增加其父级的大小，因此它不能产生无限循环。
由于父元素如果不缩放到其相对高度的子元素，则具有可知的有限大小，因此只要absolute元素也是block或inline-block元素（因为inline根据其内容强制调整大小），absolute元素上的height:100%;就会被使用（以预期的方式）。
它也需要一个width，即使block，因为它已经从文档流中删除，因此不再知道它应该有多宽（父级还是锚定祖先？
旁白
实现的改变要归功于 Lea Verou 的书，当我读到她关于使用 ::before 的建议时，我感觉自己完全傻了——特别是因为我之前实际上已经用它来扩展可点击区域了。
另外，伪元素的元素到底是什么？与 CSS 有染的父母？
只要 TH 上没有单元格填充，这应该可以工作：
th {
height: 2em;
}
th a {
display: block;
height: 2em;
}