Когда WebKit (Safari, Chrome) встречается со встроенным блоком где...
line-height
высота указана... элемент встроенного блока игнорирует указанное 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
.
Учитывая текущее поведение, я полагаю, что одно из следующего верно:
Если кто-либо мог бы предоставить некоторое разъяснение по проблеме и каково ожидаемое поведение должно быть, я был бы очень признателен за его.
Это похоже на ошибку, поскольку работает, когда секция занимает всего одну строку.
В Chrome и Safari есть функция, с помощью которой вы можете сообщать об ошибках, чтобы помочь их разработчикам исправить их.