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>

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

在不使用CSS相对定位的情况下在链接图像上叠加图层文本？

1 个答案: