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表格单元格更改为像其他单元格一样具有无效图像，则该表格将返回到60px的高度。第二个你给它一个高度为60px的有效图像，表格高度会扩大。

有什么想法吗？我已经阅读了一些关于可能奇怪地处理图像的表的事情。有没有解决方法？我可以用任何方法强制桌子高度保持在60px？我已经尝试在包含图像的单元格中嵌入一个块div，我尝试在CSS中更改img属性来显示：没有骰子的块。提前感谢您的时间

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;
}

插入高度相等的图像时，设置表格高度会扩大

1 个答案: