0

前段时间我写了一个预订时段日历来取乐。页面上有一个现场演示。我的目标是在不使用 CSS 定位的情况下将文本叠加在表格单元格内的超链接图像上。说的有点啰嗦，我来解释一下……

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

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

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

4

1 回答 1

2 
<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 值，测试直到你得到一个好的值

于 2013-04-28T09:18:48.663 回答