css - 固定 div 中的图像 - 有趣的 Firefox 行为

Question

考虑以下示例:( live demo here )

HTML:

<div class="board">
  <div class="row">
    <div class="cell blue"></div><div class="cell"><img src="http://i44.tinypic.com/25sa9z4.png" /></div><div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div><div class="cell"></div><div class="cell"></div>
  </div>
</div>

CSS:

.cell {
  width: 16px;
  height: 16px;
  display: inline-block;
}
.blue.cell {
  background-color: blue;
}
.row {
  height: 16px;
  background-color: #aaa;
}
.board {
  width: 48px;
}

在 Chrome 17 和 Safari 5.1.4 中，蓝色单元格位于第一行，正如预期的那样。
但是，在 Firefox 11.0 中，蓝色单元格位于第二行!

为什么会有这种差异？如何使其保持一致？

Answer 1

查看 fiddle 和演示:

fiddle :http://jsfiddle.net/cSWnb/12/

演示:http://jsfiddle.net/cSWnb/12/embedded/result/

更新的 fiddle :

fiddle :http://jsfiddle.net/cSWnb/23/

演示:http://jsfiddle.net/cSWnb/23/embedded/result/

.cell {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align:top;
}
.blue.cell {
    background-color: blue;
}
.row {
    height: 16px;
    background-color: #aaa;
}
.board {
    width: 48px;
}

见下图:

浆果图像的高度超过了单元格的高度，因此 FF 出现了渲染问题。这是浏览器兼容性问题，chrome 和 safari 是基于 webkit 的浏览器，因此它们的呈现方式相似。在 FF 中，默认情况下元素不是 Vertical-align:top；所以我们必须设置 css 属性以使元素与浏览器兼容。