固定 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 和 Chrome 中，单元格在顶部对齐，因为 WebKit 知道两个元素不能占据相同的空间并重新设置其他一些元素的样式以获得正确的输出这就是为什么 WebKit 是最好的 .在 Firefox 中，单元格被推到底部，因为图像与基线对齐。所以看起来第二个单元格是蓝色的，但实际上第一个单元格是。

尝试将img 上的vertical-align 设置为top，您会看到与顶部对齐的单元格，第一个单元格为蓝色。 http://jsfiddle.net/cSWnb/21/