VJiK

Адрес: http://htmlacademy.ru/courses/ Довольно неплохие курсы для начинающих изучать HTML и CSS. Всё обучение в академии происходит в практическом режиме. По сути, оно сводится к прохождению огромного количества практических заданий. PS Если вдруг кто вздумает записаться на платный интенсив — промо-код: 10162bcde6 (даёт скидку 10%)

извиняюсь, не заметил)

ну вообще нельзя же несколько id использовать)) А если создать клон - то будет действовать и внутри клона, но не на всём документе.

$('#menu').on('click', 'LI:not(.cur) SPAN', function(){ console.log($(this).text()) }); Нет, тут как раз событие вешается на #menu, а потом в этом блоке уже ищется селектор 'LI:not(.cur) SPAN', и если найдено - выполняется функция.

Понял в чём тупил. Я думал поиск начинается внутри #menu и не включает в себя сам #menu. Спасибо за объяснения!

HTML: <ul class="b-sideMenu> <li class="cur"><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> </ul> JS #1: $('#menu :not(.cur) SPAN').each(function(){ console.log($(this).text()) }); $('#menu').on('click', ':not(.cur) SPAN', function(){ console.log($(this).text()) });В консоль выводится "2" и "3" (логично). События click работает для всех SPAN. Почему? Должно работать для 2 и 3. JS #2: $('#menu >:not(.cur) SPAN').each(function(){ console.log($(this).text()) }); $('#menu').on('click', '>:not(.cur) SPAN', function(){ console.log($(this).text()) });В консоль выводится "2" и "3" (логично). События click не работает ни для одного SPAN. Почему? Должно работать для 2 и 3. JS #3: $('#menu LI:not(.cur) SPAN').each(function(){ console.log($(this).text()) }); $('#menu').on('click', 'LI:not(.cur) SPAN', function(){ console.log($(this).text()) });В консоль выводится "2" и "3" (логично). События click работает для SPAN "2" и "3" (логично). Собственно, не могу понять почему в JS #1 и JS #2 некорректно вешаются события на SPAN? PS jQuery версии 1.7.1

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

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

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

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

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

Потому что телефон выравнивается по строке города. Поставь line-height: 26px; у DIV class=number А почему телефон выравнивается по строке города, они же не должны зависеть друг от друга... Как же это не зависят? Они же находятся в одной строке Это пробовал? Они находятся в разных слоях и не должны зависить друг от друга. Мне интересно понять отчего такое поведение именно в ИЕ7

Потому что телефон выравнивается по строке города. Поставь line-height: 26px; у DIV class=number А почему телефон выравнивается по строке города, они же не должны зависеть друг от друга... Там вот такая структура: <div class="city" style="float:left;">ГОРОД</div><div class="phone" style="float:left;">ТЕЛЕФОН</div>

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

Вот верстка: http://predvoditelev.ru/tmp/test_ie7_bug/main.html При нажатии на город отображается список городов с номерами. В большинстве браузерах отображается всё хорошо, а вот в ИЕ7 при открытии списка наблюдается смещение на 1px вниз, причем только для телефона... Отчего так?