Состояние наведения перемещает мой h2 в Google Chrome

0

В настоящее время я работаю над тестовой страницей для разработки функции php и натолкнулся на очень странную ошибку.

Когда вы наводите навигационные элементы с помощью ссылки 1, ссылка 2, ссылка 3, h2, находящийся под заголовком, кажется, прыгает вверх и вниз.

Состояние зависания предназначено для определенного класса шрифтов и никоим образом не нацелено на h2.

Стиль стиля зависания:

ul.mainNav > li a:hover .fa-caret-square-o-up {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}

Текст "Поиск по zip-коду" является элементом h2.

Вот скрипка: Demo

Как я могу решить эту проблему, и если кто-нибудь знает, почему это происходит, сообщите мне об этом. :]

  • 0
    Это хорошо работает и для меня. Пожалуйста, попробуйте обновить кеш и заново открыть Chrome. Не могу воспроизвести проблему, извините. Возможно, вы можете вручную установить странное значение margin-top по умолчанию для h2 на целое число (на данный момент: margin-top: 12.4499998092651px)
Теги:
google-chrome
hover

2 ответа

0

Не уверен, что вы изменили демонстрацию в своем исходном сообщении или в комментарии в ответе Paulie_D, но когда я просматриваю страницы, я не вижу, как движутся элементы. Я использую Google chrome Version 32.0.1700.72 m. Вы используете текущую версию?

Поделиться
  • 0
    Я не редактировал демо, и версия, которую я использую, - это версия 32.0.1700.76, которая немного новее вашей версии.
  • 0
    Я только что обновил свой браузер Chrome и до сих пор не вижу проблемы. Я даже попробовал Firefox (v26.0), и он работал правильно. Я не вижу текста «Поиск по почтовому индексу», который движется при наведении на ссылку 1, 2, 3.
Показать ещё 5 комментариев
0

Класс .wrapper имеет position:relative.

Отключение, которое решает проблему, но может нарушить другую компоновку.

Поделиться
  • 0
    К сожалению, мне нужна position: relative; на обертке, но это только ошибка? Когда я изменил свой макет на этом сайте healthbenefitsohio.com/zip-code-test, он, похоже, тоже это исправил .
  • 0
    Вам нужно только относительное position потому что вы используете абсолютное позиционирование на логотипе. Попробуйте изменить HTML-код заголовка, используя плавающие или встроенные блоки, если не происходит что-то еще. Что касается того, есть ли другое решение, я не знаю .... потому что я не знаю, что на самом деле вызывает проблему.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню