В ИЕ7 смещение на 1px... Подскажите почему?

[VJiK]

Вот верстка: http://predvoditelev.ru/tmp/test_ie7_bug/main.html

При нажатии на город отображается список городов с номерами.

В большинстве браузерах отображается всё хорошо, а вот в ИЕ7 при открытии списка наблюдается смещение на 1px вниз, причем только для телефона... Отчего так?

[DasBit]

Хм...у меня все нормально отобразилось

[psywalker]

При исчезновении нижнего бордера высота строки немножко меняется и поэтому чуть дёргается.

[VJiK]

Но почему дергается только телефон, а строка города при этом остаётся на месте?

[psywalker]

Но почему дергается только телефон, а строка города при этом остаётся на месте?

Потому что телефон выравнивается по строке города. Поставь line-height: 26px; у DIV class=number

[VJiK]

Но почему дергается только телефон, а строка города при этом остаётся на месте?

Потому что телефон выравнивается по строке города. Поставь line-height: 26px; у DIV class=number

А почему телефон выравнивается по строке города, они же не должны зависеть друг от друга...

Там вот такая структура:

<div class="city" style="float:left;">ГОРОД</div><div class="phone" style="float:left;">ТЕЛЕФОН</div>

[psywalker]

Но почему дергается только телефон, а строка города при этом остаётся на месте?

Потому что телефон выравнивается по строке города. Поставь line-height: 26px; у DIV class=number

А почему телефон выравнивается по строке города, они же не должны зависеть друг от друга...

Как же это не зависят? Они же находятся в одной строке

Это пробовал?

Поставь line-height: 26px; у DIV class=number

[VJiK]

Но почему дергается только телефон, а строка города при этом остаётся на месте?

Потому что телефон выравнивается по строке города. Поставь line-height: 26px; у DIV class=number

А почему телефон выравнивается по строке города, они же не должны зависеть друг от друга...

Как же это не зависят? Они же находятся в одной строке

Это пробовал?

Поставь line-height: 26px; у DIV class=number

Они находятся в разных слоях и не должны зависить друг от друга. Мне интересно понять отчего такое поведение именно в ИЕ7

[psywalker]

Но почему дергается только телефон, а строка города при этом остаётся на месте?

Потому что телефон выравнивается по строке города. Поставь line-height: 26px; у DIV class=number

А почему телефон выравнивается по строке города, они же не должны зависеть друг от друга...

Как же это не зависят? Они же находятся в одной строке

Это пробовал?

Поставь line-height: 26px; у DIV class=number

Они находятся в разных слоях и не должны зависить друг от друга. Мне интересно понять отчего такое поведение именно в ИЕ7

Какая разница, в чём они находятся. Ведь оба контейнера находятся в одной строке!

[VJiK]

Да, они находятся в одной строке, но выравниваются то блоки ТЕЛЕФОН и ГОРОД по верхней границе, то есть высота одного не зависит на положение другого по вертикали. Ведь так же?

Edited July 27, 2011 by VJiK

[psywalker]

Да, они находятся в одной строке, но выравниваются то блоки ТЕЛЕФОН и ГОРОД по верхней границе, то есть высота одного не зависит на положение другого по вертикали. Ведь так же?

Сейчас сам обратился с этим вопросом к Great Rash-у. Самому хочется понять этот момент. Так что надеюсь, скоро мы сможем пополнить копилку новыми знаниями

[VJiK]

Да, было бы неплохо

Пока решил эту проблему просто - для ие7 задал отступ сверху на 1px меньше. Но хочется понять природу такого поведения.

[Justnewone]

Я ничего не наблюдаю у себя, но предлагаю пару мыслей:

1. Эти 2 блока отвязаны друг от друга флоатами, тезис про строку вероятнее всего неуместен.

2. В качестве отладки попробовал бы следующее, поэтапно: убрать указания для шрифтов, понавставлять зумов.

[psywalker]

В общем со строкой я погорячился. line-height влияет только на инлайн элементы, например текст. Но не на блоки с флоат. Выравнивается только текст внутри них.

А тут проблема видимо в верхних бордерах. Нужно просто уменьшить паддинг на единицу например или жёстко задать высоту для блоков.

Видимо ИЕ7 при расчете line-height учитывает бордер. И вообще неправильно сочетать паддинг и лайн-хейт

задай всем элементам высоту (там кажись 34 пикселя вместе с бордерами) и убери padding-top везде

[VJiK]

Не понятно почему бордер в телефоне влияет на высоту, а в городе нет...

[psywalker]

Не понятно почему бордер в телефоне влияет на высоту, а в городе нет...

Но ведь ты его отключаешь или не ставишь для города? И потом опять же, как сказал Great Rash, сочетать бордеры, паддинги и лайн-хейт неправильно. Лучше вообще переделай всё, как надо.

[VJiK]

А в чем проблема сочетания бордеров и паддингов - что в этом плохого?

А по поводу line-height - у меня только с ним получается сделать кроссбраузерно отображение шрифта... как без него?

[psywalker]

VJiK,

А в чем проблема сочетания бордеров и паддингов - что в этом плохого?

Тут не в чём. А вот в сочетании ещё и с line-height проблемы.

А по поводу line-height - у меня только с ним получается сделать кроссбраузерно отображение шрифта... как без него?

Можно например просто паддинги верхние сделать, без line-height

[Great Rash]

http://jsfiddle.net/cYDv9/

[VJiK]

Great Rash, спасибо за вариант решения.

По проблеме топика ясно.. глюк ие с паддингами+бордеры+lineheight.

Но вернемся к line-height. Я на всём сайте задаю сразу font-size и line-height в пикселях. Соответственно если где-то другой размер шрифта, то и line-height тоже указываю. Подскажите, как оптимизировать это)