Когда 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
- это ошибка во всех других движках рендеринга
- Спецификации относительно этой конкретной ситуации туманны, и используются разные подходы
Если бы кто-нибудь мог дать некоторые разъяснения по этому вопросу и каково должно быть ожидаемое поведение, я был бы очень признателен.