html - CSS 表格单元格高度等于 img 高度

Question

我有 CSS-table (display: table) > 带有内部 div (display: table-cell) > 带有内部 imgs。

表格单元格的宽度等于imgs的宽度，但问题是表格单元格的高度不等于!它添加了一些额外的(4 或 5)像素。因此，如果我的 img 是 100px(高度)，那么表格单元格就是 104px。

JSFIDDLE

HTML

<div class="table">
  <div class="table-cell"><img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt=""></div>
  <div class="table-cell"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Cyan-square.png" alt=""></div>
  <div class="table-cell"><img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt=""></div>
</div>

CSS

.table {
  display: table;
}

.table-cell {
  display: table-cell;
  background: black;
}

请告诉我为什么会发生这种情况以及如何解决？

Answer 1

为您的图像添加显示属性。

.table {
  display: table;
}
.table-cell {
  display: table-cell;
  background: black;
}
img {
  display: block;
}

<div class="table">
  <div class="table-cell">
    <img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt="">
  </div>
  <div class="table-cell">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Cyan-square.png" alt="">
  </div>
  <div class="table-cell">
    <img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt="">
  </div>
</div>