Подробный анализ атрибута вертикального выравнивания. В последние дни я внимательно изучил атрибут вертикального выравнивания. Результат меня удивил. Этот очень «старший» стандарт CSS на самом деле ведет себя по-разному в разных браузерах.
Существует множество значений для вертикального выравнивания, включая базовую линию, субужин, верх, текст, верх, низ, текст, низ, середину и различные значения длины (%, em, ex и т. д.). Позвольте мне сначала показать вам значение, которое, по моему мнению, является наиболее преувеличенным: дно. Код выглядит следующим образом:
Пример исходного кода
[www.52css.com] п {
размер шрифта: 18 пикселей;
высота строки: 36 пикселей;
семейство шрифтов: Tahoma, без засечек;
}
изображение {
вертикальное выравнивание: снизу;
}
Затем взгляните на эффект этого CSS в различных браузерах (картинка намеренно сделана такой, чтобы было хорошо видно взаимное положение):
Что ж, этот результат на самом деле очень неожиданный. Вообще, я думал, что Firefox объяснит это более правильно, чем IE, но, посмотрев на Opera, я обнаружил, что это то же самое, что IE, тогда как Safari/Win находится на стороне Firefox. . Честно говоря, я не знаю, что происходит.
Я внимательно изучил «Полное руководство по CSS (второе издание)» и даже проконсультировался с W3C, а затем сам составил диаграмму вертикального выравнивания:
Согласно определению W3C, когда для вертикального выравнивания встроенного элемента установлено значение:
1. При использовании базовой линии, сверху и снизу базовая линия (или середина, верх, низ) элемента выравнивается по одному и тому же положению окружающих элементов, например верхней части изображения и верхней части окружающего текста.
2. При использовании text-top и text-bottom верхняя (или нижняя) часть элемента выравнивается по text-top (или text-bottom) окружающих элементов.
3. Длина (%, em, ex) перемещается вверх относительно базовой линии, поэтому положительные числа увеличиваются, а отрицательные числа уменьшаются.
4. В середине центр элемента выравнивается по центру окружающих элементов. Определение «центра» здесь следующее: изображение, конечно же, имеет половину высоты, а текст должен быть перемещен вверх на 0,5ex относительно базовой линии, которая является точным центром строчной буквы «x». Однако многие браузеры часто определяют единицу ex как 0,5em, так что это не обязательно точный центр x (например, на рисунке выше высота x должна быть 10 пикселей, а em — 18 пикселей, поэтому два значения разные).
Однако, даже следуя приведенным выше рекомендациям, меня поражает то, что браузеры интерпретируют вещи так по-разному. Мне лень исследовать, почему это так. Вообще говоря, должно быть так, что у них разные определения положения каждой строки шрифта, поэтому эта проблема связана не только с вертикальным выравниванием, но и с интерпретацией браузером структуры встроенного текста и встроенных изображений. имеет к этому большое отношение.
