Элемент немного смещается при наведении в IE7

Question

У меня есть элемент, который при наведении курсора на IE7 вызывает незначительное смещение элемента, представленного ниже.

Вы можете увидеть этот элемент здесь: http://andovertowncouncil.customstudio.co.uk/

На правой боковой панели каждогоТовар имеет заголовок H2.Когда вы наводите курсор мыши на это в IE7, элемент ниже смещается на 2/3 пикселя.Если затем вы наводите курсор на что-то еще, например на кнопку, этот нижний элемент возвращается в исходное положение.

Я пытался быть очень конкретным с моим эффектом наведения:

.right-item h2 a:hover {
margin-bottom: 5px;
border-bottom: none;
padding-bottom: 0;
text-decoration: none;
line-height: 30px;
}

Нобез успеха.

Буду признателен за любые предложения о том, как решить эту проблему?

Заранее спасибо,

Том

Answer 1

Не могу сказать, почему вы добавляете следующие правила при наведении, но именно они вызывают сдвиги в вашем контенте:

.right-item h2 a:hover {
    border-bottom: medium none;
    line-height: 30px;
    margin-bottom: 5px;
    padding-bottom: 0;
    text-decoration: none;
}

a:hover {
    border-bottom: medium none;
}

Если удалить все во всех браузерах, все выглядит хорошо.

Answer 2

Вы добавляете margin-bottom при наведении.

Попробуйте удалить это и посмотреть, решит ли это вашу проблему.