html - 设置表格高度在插入等高图像时扩展

Question

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

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

我已经设置了一个显示行为的 fiddle :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 像素的高度。当您给它一个高度为 60 像素的有效图像时，表格高度就会扩大。

有什么想法吗？我读过一些关于表格可能奇怪地处理图像的事情。有什么解决方法吗？有什么方法可以强制表格高度保持在 60px？我已经尝试在包含图像的单元格中嵌入一个 block div，并且我尝试将 CSS 中的 img 属性更改为 display:block with no dice。预先感谢您的宝贵时间

Answer 1

尝试给table item设置一个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;
}