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

Question

我正在尝试将绝对定位的图像放入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的信息，但是在这种情况下，同样的技巧似乎不起作用。 如何将绝对定位的img放入td中？ 谢谢。

Answer 1

不看结果就很难看清问题所在，但是我马上注意到了一些事情：

您尚未设置绝对位置图片的位置（即top：0; left：0;）...这很可能是图片消失的原因

您还没有为图像本身指定padding＆margins为0。

如果是表本身引起了问题，您也可以尝试：table {border-collapse：collapse;}以确保边框被折叠而不留间隙。