Когда Webkit (Safari, Chrome) встречает встроенный блок, где...
- указана высота
line-height - содержимое визуализируется с использованием нескольких линейных ящиков
... элемент inline-block игнорирует указанный vertical-align.
Чтобы проиллюстрировать проблему, у меня есть небольшой тестовый пример: http://arther.net/lab/webkit-vertical-align-test.html#test
Firefox 3.6, Opera 10.53 и IE7 + обрабатывают такие встроенные блоки, как встроенные элементы, а вертикальное выравнивание работает, как ожидалось. Webkit-браузеры (и Opera 10.10) рассматривают встроенные блоки в этой ситуации как элементы уровня блока, игнорируя при этом vertical-align. Итак, кто прав, а кто глючит?
Я вижу, как это происходит в любом случае. С одной стороны, вы можете сказать, что все встроенные элементы - даже встроенные блоки - должны позиционировать себя в пределах содержащего линейного блока в соответствии с vertical-align. С другой стороны, встроенные элементы обычно определяют один встроенный ящик и не имеют собственных строк. Все, что обертывает несколько строк, должно быть элементом уровня блока. В этом случае встроенный блок следует рассматривать как блок, который, таким образом, игнорирует vertical-align.
Учитывая текущее поведение, я считаю, что одно из следующего верно:
- Это ошибка Webkit
- это ошибка во всех других механизмах рендеринга
- спецификация неясна в отношении обработки этой конкретной ситуации, и предпринимаются различные подходы.
Если кто-то может дать некоторые разъяснения по этому вопросу и каково должно быть ожидаемое поведение, я бы очень признателен.
