Javascript 不使用CSS相对定位的链接图像顶部的层文本？

前段时间我写了一篇有趣的文章。页面上有一个现场演示。 我的目标是在表格单元格中的超链接图像上分层文本，而不使用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>

6.

有没有更好的方法来完成此任务？

<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>

a、 绿色{显示：块；宽度：64px；高度：50px；背景：url（“images/block_free.gif”）不重复；文本对齐：居中；线条高度：49px；}

//不完全确定线高度值，测试直到得到一个好的值