jquery - 在不使用负边距的情况下删除顶部图像和导航菜单之间的空间

Question

我对图像和菜单之间的一点空白有疑问。我摆脱它的唯一方法是使用负边距。然而，由于我使用的是必需的 Strict DTD，负边距不是一个选项。有人可以告诉我我做错了什么吗？整件事始于与 IE8 的不兼容问题，这就是为什么我必须将 doctype 更改为 strict 的原因。谢谢!

<table bgcolor="#ffffff" cellpadding="0" cellspacing="0" margin="0">
    <tr>
        <td>
            <TABLE width="742" border="0" cellpadding="0" cellspacing="0" margin="0">
                <TR>
                    <TD width="742">
                        <img src="http://www.eromadayspa.com/images/header_mainimage_xmas2.jpg" />
                    </TD>
                </TR>
            </TABLE>
            <div id="container">
                <ul id="nav">
                    <li><a href="">Link</a>

                    </li>
                    <li><a href="">Link</a>

                        <ul>
                            <li><a href="">Link</a>

                            </li>
                            <li><a href="">Link</a>

                            </li>
                            <li><a href="">Link</a>

                            </li>
                            <li><a href="">Link</a>

                            </li>
                            <li><a href="">Link</a>

                            </li>
                        </ul>
                    </li>
                    <li><a href="">Link</a>

                        <ul>
                            <li><a href="">Link</a>

                            </li>
                            <li><a href="">Link</a>

                            </li>
                            <li><a href="">Link</a>

                            </li>
                            <li><a href="">Link</a>

                            </li>
                        </ul>
                    </li>
                    <li><a href="">Link</a>

                    </li>
                    <li><a href="">Link</a>

                    </li>
                </ul>
            </div>
            <br />
            <br />
            <br />
        </td>
    </tr>
</table>

CSS 是:

#container {
    width: 742px;
    margin:0;
    padding: 0;
    font: 100% Helvetica, Arial sans-serif;
    font-size:12px;
    font-style:italic;
    font-weight:bold;
}
ul#nav {
    line-height: 25px;
    padding: 0;
    margin:0;
}
ul#nav li {
    float: left;
    position: relative;
    list-style: none;
    background: #006666;
}
ul#nav li a {
    width: 146.4px;
    display: block;
    border: 1px solid #000;
    text-align: center;
    text-decoration:none;
    color: #fff;
    height:25px;
}
ul#nav li:hover {
    background: #990000;
}
ul#nav ul {
    position: absolute;
    padding: 0;
    left: 0;
    top: 100%;
    width:100%;
    visibility: hidden;
}
ul#nav li:hover ul {
    visibility: visible;
}
ul#nav a:hover {
    color: yellow;
}
ul#nav ul li {
    float:none;
    width:100%;
}
ul#nav ul li a {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    /* Firefox */
    text-align:left;
    padding-left:8px;
    height:26px;
    display:block;
}
header, nav, section, article, aside, footer, hgroup {
    display: block;
}

http://jsfiddle.net/jz4hM/5/

Answer 1

在你的代码中添加这个css，然后你就可以得到你想要的结果

 img {
   border-spacing: 0;
height: 100%;
display: block;
}

fiddle 的结果 http://jsfiddle.net/H4eNH/1/