如何将绝对定位的图像放入?

时间:2011-12-11 16:50:35

标签: html image html-table

我试图在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?谢谢。

1 个答案:

答案 0 :(得分:0)

在没有看到结果的情况下很难看出出了什么问题,但我立即注意到了一些事情:

您尚未设置绝对位置图像的位置(即顶部:0;左侧:0;)...这可能是您图像消失的原因

您还没有指定padding&amp;图像本身的边距为0。

如果是导致问题的表本身,您还可以尝试:     table {border-collapse:collapse;} 确保边界崩溃,不留间隙。