固定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

请参阅小提琴和演示：

小提琴：http://jsfiddle.net/cSWnb/12/

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

更新小提琴：

小提琴：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属性以使元素与浏览器兼容。

Answer 2

它不是第二个是蓝色的细胞，它是第一个是蓝色的细胞。区别在于定位。

在Safari＆amp; Chrome，单元格在顶部对齐，因为WebKit knosw两个元素不能占用相同的空间并重新设置其他一些元素以获得正确的输出这就是为什么WebKit是最好的。在Firefox中，单元格被推到底部，因为图像在基线处对齐。因此看起来第二个细胞是蓝色的，但实际上第一个细胞是。

尝试在vertical-align上设置top至img，您会看到细胞与顶部对齐，第一个细胞为蓝色。 http://jsfiddle.net/cSWnb/21/