Оригинальный текст: http://www.mikkolee.com/13
В последние дни я тщательно изучил атрибут вертикальной адации, и результат удивил меня. Этот очень опытный стандарт CSS фактически работает по -разному в каждом браузере.
Существует множество значений для вертикального соглашения, в том числе базовый суб-подгрупп-верхний текст-верхний нижний текстовый и различная длина (%, EM, EX и т. Д.). Позвольте мне показать вам одно из самых преувеличенных значений, я думаю: внизу. Код заключается в следующем:
p {
размер шрифта: 18px;
высота линии: 36px;
Фондовая семья: Тахома, Санс-Сэриф;
}
img {
Вертикальная атака: внизу;
}
Затем давайте посмотрим на эффект этого CSS в различных браузерах (картина сделана специально, чтобы я мог четко видеть относительную позицию):
Ну, этот результат на самом деле очень невероятный. Как правило, я думаю, что Firefox объяснит это более правильно, чем IE, но, посмотрев на оперу, я обнаружил, что это то же самое, что и IE, в то время как Safari/Win находится на стороне Firefox. Честно говоря, я не знаю, что происходит.
Я тщательно изучил «авторитетное руководство по CSS (второе издание)» и даже посмотрел W3C, а затем сделал картину о вертикальном соглашении самостоятельно:
Согласно W3C, когда вертикальная сходство встроенного элемента установлена на: базовый, сверху, внизу, базовый (или средний, вверху, внизу) элемента-то же положение, что и окружающие элементы, такие как верхняя часть изображения и верхняя часть окружающего текста. Когда текстовые и текстовые дни находятся на текстовой версии (или внизу) элемента, выровняет текстовую топ (или текстовый пучок) окружающего элемента. Когда длина (%, em, ex), она поднимается на основе базовой линии, поэтому положительные числа растут, а отрицательные числа снижаются. Когда центр элемента выровнен с центром окружающего элемента. Определение центра здесь: изображение, конечно, половина высоты, и текст должен быть перемещен на 0,5EX на основе базовой линии, то есть в центре строчной буквы x . Тем не менее, многие браузеры часто определяют единицу ex как 0,5 эм, поэтому это не обязательно является центром x (в качестве примера высота x должна быть 10px, в то время как EM составляет 18px, поэтому два значения разные).
Однако, даже в соответствии с вышеупомянутыми руководящими принципами, невероятно, что объяснения каждого браузера настолько разные. Мне лень изучать, почему это так. В целом, они должны иметь разные определения положения каждой строки в шрифте, поэтому эта проблема связана не только с вертикальной атакой, но и с объяснением браузера структуры встроенного текста и встроенных изображений.
Наконец, я дам вам тестовую страницу, и вы сможете взглянуть на объяснения различных значений вертикального соглашения каждым браузером.
http://www.mikkolee.com/weblab/001_vertical/
Вы можете проверить другие значения, такие как средняя или текстовая топ, которые полностью отличаются от каждого браузера. Если у вас есть опыт, пожалуйста, обсудите это ~~