我基本上有以下几点:
<table>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="..."></a>
</td>
</tr>
</tbody>
</table>
假设表格单元格具有一些宽度和高度,由附加的表格单元格和表格标题元素创建。
我需要锚元素扩展到表格单元格的相同宽度和高度,以便您可以单击单元格中的任何位置以进入链接。如何做到这一点,以便它跨浏览器兼容?
澄清
将锚点的样式设置为:
style="display: block; height: 100%; width:100%;"
将锚点的样式设置为:
style="display: block; height: 100%; width:100%;"
在链接内部放置一个空的跨度。你可以给它一个类并添加css或给它一个内联样式。
我更喜欢添加这样的类:
<table>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="anchor" href="#"><span class="linkfill"></span>Link</a>
</td>
</tr>
</tbody>
<style>
.linkfill {
position: absolute;
width: 100%;
height: 100%;
}
</style>
这将与你的桌子一起弯曲。工作小提琴: http://jsfiddle.net/zGWTk/6/
以下黑客工作[在Chrome / Firefox / Safari上测试]
对td和锚元素使用相同的填充。并且对于锚也具有等于填充值的-ve的余量。
HTML
<table>
<tr>
<td><a>Hello</a></td>
</tr>
</table>
CSS:
td {
background-color: yellow;
padding: 10px;
}
a {
cursor:pointer;
display:block;
padding: 10px;
margin: -10px;
}
工作小提琴:http://jsfiddle.net/JasYz/