如何将绝对定位的 img 放入 <td>？答案

【问题标题】：How do I put an absolute positioned img into a <td>?如何将绝对定位的 img 放入 <td>？
【发布时间】：2012-01-17 22:32:24
【问题描述】：

我正在尝试将绝对定位的图像放入 td.以下代码在 FF 3.6 中的图像上方创建了不需要的间隙，并使图像在 IE 7 中消失。我在表格代码之前包含了相关的外部样式表元素。

#leftColTopTdImg
{
 padding:0px;
 margin:0px;
 position:relative;
}
#navLinksTD
{
position:relative;
padding:0px;
margin:0px;
}
#navLinksBoxDiv
{
position:relative;
width:100%;
height:100%;

padding:0px;
margin:0px;
}
#navLinksInBox
{
position:relative;
}
#navLinksBg
{
position:absolute;
width:100%;
height:100%;
}

    <table width="222px" cellspacing="0px" cellpadding="0px" border="0px">
    <tbody>
        <tr>
            <td id="leftColTopTdImg"><img width="222px" height="77px" alt="" src="../leftcol_top.jpg" /></td>
        </tr>
        <tr>
            <td id="navLinksTD">
                <div id="navLinksBoxDiv">
                    <img id="navLinksBg" src="../menu_combined_2r.jpg" alt="The background for the navigation link box.  It has a vertical gradient going from light to dark and then dark to light blude" />
                    <ul id="navLinksInBox">
                        <li>
                            <a href="#">Driving While Intoxicated</a>
                        </li>
                        <li>
                            <a href="#">Sex Crimes</a>
                        </li>
                        <li>
                            <a href="#">2nd Driving While Intoxicated</a>
                        </li>
                        <li>
                            <a href="#">2nd Sex Crimes</a>
                        </li>
                    </ul>
                <!--End of navLinksBoxDiv-->                                                            
                </div>
                <img id="menuBottom" src="../menu_bottomedge.jpg" alt="The bottom of the menu" />
            <!--End of navLinksTD-->
            </td>
        </tr>
    </tbody>
</table>

我已经阅读了很多关于在 td 中定位绝对 div 的内容，但同样的技巧在这种情况下似乎不起作用。如何在 td 中放置绝对定位的 img？谢谢。

【问题讨论】：

标签： html image html-table

【解决方案1】：

不看结果就很难看出哪里出了问题，但有几件事我马上就注意到了：

您尚未设置绝对定位图像的位置（即顶部：0；左侧：0；）...这很可能是您的图像消失的原因

您还没有将图像本身的内边距和边距指定为 0。

如果是表本身导致问题，您也可以尝试：表{边框折叠：折叠；} 以确保边框折叠且不留空隙。

【讨论】：