插入等高图像时，设置表格高度会扩展

Question

我正在创建一个用于移动导航的标题。我决定使用表格，因为该站点具有响应式布局，并且表格中的最后一项需要具有动态宽度（并且表格为此非常出色）。

但是我遇到了最后一个问题。对于表格中的第一个“主页按钮”（60x60），如果我在其中插入一个 60x60 的图像，表格的高度会从其设定值 60px 增加到 65~66px 左右。在浏览器中检查表格时，我找不到导致额外高度的原因（没有填充/边距/边框/等）。

我已经设置了一个显示行为的小提琴：http://jsfiddle.net/4QC8S/3/

HTML：

<div class="table">
    <div class="myimg"><img src="http://i.imgur.com/oxRzF30.png"></div>
    <div class="tablecell"><img src="twitter.png"></div>
    <div class="tablecell"><img src="youtube.png"></div>
    <div class="tablecell"><img src="apple.png"></div>
    <div class="tablecell"><img src="email.png"></div>
</div>

CSS：

.table {
    display:table;
    margin-right:auto;
    margin-left:auto;
    width:100%;
    height: 60px;
}

.tablecell {
    display:table-cell;
    text-align:center;
    border: 1px solid black;
}

.myimg {
    display:table-cell;
    text-align:center;
    border: 1px solid black;
    width: 60px;
}

如果您将第一个 HTML 表格单元格更改为与其他单元格一样具有无效图像，则表格将返回到 60 像素的高度。当你给它一个高度为 60px 的有效图像时，表格高度会扩大。

有什么想法吗？我读过一些关于表格的东西可能会奇怪地处理图像。有什么解决方法吗？有什么方法可以强制表格高度保持在 60px？我尝试在包含图像的单元格中嵌入一个块 div，并尝试将 CSS 中的 img 属性更改为 display:block 而没有骰子。提前感谢您的宝贵时间

Answer 1

尝试为表格项设置line-height:0;，如果您只使用图像就可以了。如果使用文本，则需要具有适当行高的新容器

http://jsfiddle.net/NicoO/4QC8S/5/

.table {
    display:table;
    margin-right:auto;
    margin-left:auto;
    width:100%;
    height: 60px;
    line-height:0;
}