在不使用CSS相对定位的情况下将文本放在链接图像的顶部？

Question

前段时间我写了一个Booking Slots Calendar，只是为了好玩。页面上有一个现场演示。我的目标是在不使用CSS定位的情况下，在表格单元格内的超链接图像上分层文本。有点太多了，让我解释一下……

日历上的每个绿色或橙色方块表示一个可预订的日期，每个方块都带有相关的彩色图像，每个都超链接到相关的日期。将日期覆盖在图像的顶部并不容易，我发现的唯一跨浏览器解决方案是添加一个span标签并相对定位它。这样做的问题是，数字下的区域是不可点击的，这有时会让人们感到困惑，因为他们希望单元格中的所有内容都是可点击的。这是一个样例单元：

<td width='21' valign='top' class='days'>
    <a href='calendar.php?month=05&amp;year=2013&amp;day=06'>
    <img src='images/block_free.gif' title='This day is free' border='0' alt=''></a>
    <span>6</span>
</td>

有没有更好的方法来完成这个任务呢？

Answer 1

<td width='21' valign='top' class='days'>
    <a href='calendar.php?month=05&amp;year=2013&amp;day=06' class="green">6</a>
</td>

<style>
a.green { display: block; width: 64px; height: 50px; background: url( "images/block_free.gif" ) no-repeat; text-align: center; line-height: 49px; }
</style>

//不能完全确定line-height的值，测试直到得到一个好的值