为什么我的 <td> 背景图片被嵌套的 <div> 弄乱了？答案

【问题标题】：Why is my <td> background image messed up by nested <div>?为什么我的 <td> 背景图片被嵌套的 <div> 弄乱了？
【发布时间】：2012-08-29 10:36:18
【问题描述】：

我在这里阅读了将<div> 设为链接的提示： Make a div into a link

那里的一个答案表明即使在表格中也可以这样做。

目标是在不使用图像映射或 CSS 的情况下使图像中的多个文本项可点击。图片位于页面上的表格单元格中，<div> 位于 <td> 内，因此链接正确定位在图片中的文本上方。

除了添加<div> 后，表格单元格中的背景图像会重复。

代码如下：

<td height="419" align="left" valign="top" background="images/bg_FINAL.jpg"><img src="newimages/Splashpage.jpg" alt="" style="position:relative; left:0; top:0; " >
        <div style="height:100px; width:142px; float:none; position:relative; left:265px; top:-223px; " >
        <a href="http://SomeURL.com" style="position:absolute; top:0; left:0; width:100%; height:100%; display:block; " ></a>
        </div>
</td>

bg_FINAL.jpg 图像重复低于表格的正常高度（本例中为 419px），我不明白为什么。立即删除 <div> 使其看起来再次正常（表格边框为纯色）。

附：作为一个新用户，我无法发布图片（显然需要 10 个声望点），但这里有两个屏幕截图显示了问题：

http://www.box.com/s/bo8jef7o4ahy8kbeusdp

http://www.box.com/s/v2mafsgomj4tksul53rz

【问题讨论】：

我仍然不确定你在问什么。很可能，使用<td> 进行布局并不是正确的做法。您的屏幕截图中没有任何内容表明您需要任何类型的图像映射。尽可能使用实时文本（包括@font-face，如果使用特殊字体）和背景图片

标签： html image hyperlink html-table

【解决方案1】：

这是在黑暗中拍摄的，因为没有提供示例或确切外观的屏幕截图，它可能不是正确的修复，但我希望它可以帮助！

由于您没有声明是否希望背景重复，它会自动重复它自己。图像可能设置为与表格相同的宽度，因此您看不到它在 x 轴上重复，仅在 y 轴上重复。所以在 td 元素内声明一个样式属性并声明 (background-repeat:none) 应该可以解决问题。

像这样。

<td height="419" align="left" valign="top" background="images/bg_FINAL.jpg" style="background-repeat:none;">

【讨论】：

感谢您对它的尝试。不幸的是，添加 style="background-repeat:none; 没有效果。通常，我确实在 x 轴上看到了背景。它仅在 y 轴上变化。但是，这里有一个线索：删除 <img src="newimages/Splashpage.jpg"> 同样可以将背景恢复为正常。那么，也许 IMG 和 DIV 的交互存在一些问题？
@Axl 如果您能提供源代码或实时版本供我调试，将不胜感激。