caIIIa5 дек 2008 в 13:04

Различное поведение браузерных движков в отношении стандартов

1 мин

472

Комментарии 17

mr_idiot 5 дек 2008 в 13:15

Вообще этот код некорректен, свойство vertical-align предназначено только для ячеек таблиц. В данном случае следует использовать background-image и padding-left у надписи.

caIIIa 5 дек 2008 в 13:21

Как-то непорядки у вас с мат. частью…

www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align
Applies to: inline-level and 'table-cell' elements

HTML-свойство align=«absmiddle» отрисовывалось абсолютно так же, как и это CSS-правило, вторую картинку делать лень.

Погуглите на досуге «css replace align=absmiddle»

Читаем задачу вдумчиво еще раз: выровнять картинку относительно строки текста по горизонтали
О каком background может идти речь?

mr_idiot 5 дек 2008 в 13:33

Простой способ сделать выравненную маленькую картинку перед какой-либо надписью:
[div style=«background: url(xxx) no-repeat; padding-left: 20px; background-position: left center»]надпись[/div]

caIIIa 5 дек 2008 в 13:37

Предполагается, что картинка лежит в потоке текста…
А если я на эту картинку хочу кликнуть?

mr_idiot 5 дек 2008 в 13:44

Можно заюзать не div а a. В большинстве случаев это даже красивее, чем картинка в потоке, т. к. можно, например, создать класс .icqnumber и все номера icq делать с цветочком слева. Но если все же хочется иметь отдельную картинку, то видимо наиболее очевидным способом будет использование таблицы, некрасиво конечно, зато везде работать будет.

caIIIa 5 дек 2008 в 13:46

Вот именно такого доказательства я и ждал :)

mr_idiot 5 дек 2008 в 13:50

А поводу vertical-align я даже удивился. Когда-то где-то читал, что он только для ячеек…

caIIIa 5 дек 2008 в 13:53

про align=absmiddle тоже первый раз слышите? :)

НЛО прилетело и опубликовало эту надпись здесь

caIIIa 5 дек 2008 в 13:22

Типа того :)

0n1y_0ne 5 дек 2008 в 14:02

Вы в этом сомневались? ;)

nooze 5 дек 2008 в 13:25

Да, натыкаюсь на эту проблему постоянно, приходится подставлять костыли типа мнимых отступов, маргинов-паддингов и прочего по ситуации

NemeZZiZZ 5 дек 2008 в 14:01

Имхо, тут дело в антиальясинге шрифтов — нет? Не попробуете ли проверить?

Лень уже запускать NP++, даже чтобы написать несколько строк: хочется расслабиться и потупить :) Извините

chumric 5 дек 2008 в 14:13

Дык собственно и не секрет. Попробуем ка выровнять указатели-картинки у лишек, лисичка и ослик как будто играются с верстальщиком, причем каждый из своего угла

maxshopen 5 дек 2008 в 14:20

Ну как бы вы картинку относительно чего центрируете? Относительно строки текста? А она по вертикали остается top. Плюс, картинка 15px а высота строки вероятно четная 16px. отсюда мелкие нестыковки…

Попробуйте так:

<body>
	<img alt='' src='test.gif' style='vertical-align:middle'/>
	<span style='line-height:15px;background:#ccc;vertical-align:middle'><img src='test.gif' /></span>
</body>

бэкграунд здесь только для того, чтобы видно было где реальные граница строки, а не текста. У меня в IE7/FF3/Opera/safari одинаково.

maxshopen 5 дек 2008 в 14:21

второй img внутри спана само собой текстом должен писаться (lt/gt) как у вас на картинке, хабрапарсер его конвертнул в тэг :)

НЛО прилетело и опубликовало эту надпись здесь

Зарегистрируйтесь на Хабре, чтобы оставить комментарий