Изображение в фиксированном div - интересное поведение Firefox

Question

Рассмотрим следующий пример: ( живое демо здесь )

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

Это не вторая ячейка синего цвета, это первая ячейка синего цвета.Разница в позиционировании.

В Safari & Chrome ячейки выровнены по верху, поскольку два элемента WebKit не могут занимать одно и то же пространство и повторно создают несколько других элементов для получения правильного вывода , поэтомуWebKit является лучшим .В Firefox ячейки перемещаются вниз, потому что изображение выравнивается по базовой линии.Таким образом, кажется, что вторая ячейка синего цвета, но на самом деле первая ячейка.

Попробуйте установить vertical-align в top на img, и вы увидите, что ячейки выровнены по верхуи первая ячейка синего цвета.http://jsfiddle.net/cSWnb/21/

Answer 2

См. Скрипку и демо:

Скрипка: 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, чтобы сделать элементы для совместимости браузера.