Неправильный расчет высоты строки и выравания в ссылках с картинками

Rion · №1

суть бага: если в ссылке есть картинка и стиль у неё - (выравние по верху, inline) то размеры высоты строки со ссылкой расчитываются с игнорированием высоты картинки. или возможно берется неправильная высота картинки (порядка 12px) по которым и происходит выравнивание.

вот пример кода

Выделить код

Код:

Текст<br><a href="#" style="vertical-align:top;"><img src="" height='40px' width='40px'></a><span style="font-size:70">test</span><br>ещё текст

у кого ещё неправильно прорисовывается?

Отредактировано Rion (13-09-2005 11:38:12)

Lynn · №2

Для начала

Выделить код

Код:

<img src="" height='40px' width='40px'>

Исправь на

Выделить код

Код:

<img src="" height='40' width='40'>

а

Выделить код

Код:

style="font-size:70"

на

Выделить код

Код:

style="font-size:70px"

Lynn · №3

И ещё, каким DOCTYPE пользуешся?

Rion · №4

Lynn пишет

И ещё, каким DOCTYPE пользуешся?

а какой в фоксе по умолчанию?

упс. только что тут было другой текст... я немного ошибся..

короче доктипа не было вообще. попробовал с тем что подставлет дримвивер и сделал эти исправления что выше - проблема осталась

Выделить код

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

вот с таким доктипом со всеми поправками на xhtml проблема тоже осталась

Выделить код

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

в IE в любом случае отображается так как надо..

Отредактировано Rion (13-09-2005 12:26:32)

Snik · №5

Rion
У тебя выравнивание идет не картинки, а ссылки, а высота текста ссылки как раз и есть около 12рx, так что ФФ все правильно показывает. Если же надо, сделать так, как ты пишешь, то делай выравнивание для картинки, т.е. переставь style="vertical-align:top;" из <a> в <img>.

Rion · №6

Snik
стоп стоп стоп
чего ж тогда ссылка затирает выше стоящий текст? ведь она начинается со следущей строки и для неё top это верх этой следующей строки.
собственно именно этой меня и раздражает

Отредактировано Rion (13-09-2005 14:14:58)

Rion · №7

АА!! щас протестил! это касается не только картинок!!
ссылкам просто наплевать какие размеры чего угодно внутри них!! они просто наследуют высоту от высоты шрифта более корневого элемента!!
вот пример

Выделить код

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Текст для теста<br><a href="#" style="vertical-align:top;"><span style="font-size:70px">Ещё текст</span></a>
</body>
</html>

НЕПРАВИЛЬНО ЭТО!! это явный баг!!
всё, иду в бугзиллу

UPDATE: блин, не могу в бугзиллу войти.. опять наверное прокся глючит

Отредактировано Rion (13-09-2005 14:37:19)

igorsub · №8

Работает Bugzilla.

Yan · №9

Если "vertical-align:top;" заменить на "vertical-align:text-top;", то всё будет отображаться как задумано.
Сейчас посмотрел спецификацию:

При использовании значений 'top' и 'bottom' могут возникать неразрешимые ситуации, когда зависимости одних элементов от других образуют замкнутый цикл.

Быть может, это как раз этот случай? И это вовсе не баг, а понимание стандарта разработчиками?

Rion · №10

Yan пишет

Быть может, это как раз этот случай? И это вовсе не баг, а понимание стандарта разработчиками?

я бы охотно согласился, но когда во всех браузерах (ключая amaya !! ) это отображается правильно а в тех что на движке gecko криво, то только 2 мысли приходит в голову либо у разработчиков весьма кривое понимание стандратов или это баг!

Lynn · №11

Yan
Gecko не поддерживает text-top.

Yan · №12

Lynn
Как это не поддерживает??? Это же элементарный CSS 1. Да и в CSS 2.1 "vertical-align:text-top" никто не отменял.
Вот пример (для наглядности я там еще несколько span'ов сделал и границы):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Текст для теста 
<a href="#" style="border:1px red solid;">
Ещё текст

text-top
top


</a>
</body>
</html>

Отредактировано Yan (13-09-2005 19:21:11)

Lynn · №13

Yan
Хм. Значит меня проглючило. Я проверял, у меня не было никакого text-top. :rolleyes:

Сорри.

Snik · №14

Rion

ссылкам просто наплевать какие размеры чего угодно внутри них!! они просто наследуют высоту от высоты шрифта более корневого элемента!!

Абсолютно верно! Внимательно читаем п. 10.6.1 спецификации CSS 2.1, конкретно смотрим на "The height of the content area should be based on the font". Какой размер шрифта для ссылки? Верно, он такой же, как и для текста корневого элемента => таким и будет размер блока по вертикали.

Rion · №15

Snik пишет

Абсолютно верно! Внимательно читаем п. 10.6.1 спецификации CSS 2.1, конкретно смотрим на "The height of the content area should be based on the font". Какой размер шрифта для ссылки? Верно, он такой же, как и для текста корневого элемента => таким и будет размер блока по вертикали.

я ещё раз всё проверил. это вообще какой-то маразм! высота ссылки 12px, но срабатывает она по высоте контента.
насчет п. 10.6.1 там ниже написано что высота хоть и не определена но всё таки предлагается чтоб она была достаточна чтоб всё влезло, чему и следуют все браузеры кроме тех что на gecko..

ладно, как обычно по извращаюсь небольшим увеличеним кода чтоб кроссбраузерно всё красиво отображалось..

Отредактировано Rion (14-09-2005 09:25:22)

Snik · №16

Rion

но всё таки предлагается чтоб она была достаточна чтоб всё влезло

Да, но если прочитать вниматльно, то это самое "все влезло" относится именно к шрифту, т.е. с учетом его верхнего/нижнего индекса и т.д. И это логично, поскольку элемент строковой (inline).

Rion · №17

Snik пишет

Да, но если прочитать вниматльно, то это самое "все влезло" относится именно к шрифту, т.е. с учетом его верхнего/нижнего индекса и т.д. И это логично, поскольку элемент строковой (inline).

мой последний пример как раз с текстом, без картинок...

Snik · №18

Rion
К шрифту самого строкового элемента. Для строковых элементов не должно рассчитываться значение высоты по внедренному содержимому, только по собственным параметрам. Чего в нем там еще есть, картинки, тексты и т.д. - не важно.

Rion · №19

Snik
ладно ладно уговорил. чем кривее отображается тем правильнее :lol:

PS нафиг спорить если очевидно что было бы лучше еслиб всё выглядило красиво без лишних извращений.
PSS разработчики стандартов в своем браузере (amaya) и то всё по уму сделали не то что в на основе gecko

Отредактировано Rion (16-09-2005 12:08:13)

Полезная информация