Question

我遇到图像和菜单之间的一点点空白问题。我可以摆脱它的唯一方法是使用负边距。但是，由于我使用的是必需的严格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;
}

结果是小提琴http://jsfiddle.net/H4eNH/1/

Answer 2

此：

img {
    vertical-align: bottom;
}

这是一个CSS1属性，应该适用于所有主流浏览器。

删除顶部图像和导航菜单之间的空格，而不使用负边距

2 个答案: