Блог

На моей панели навигации есть две навигационные ссылки с закругленными границами, которые при наведении на них размер границы удваивается. Я не могу заставить его работать без перемещения навигационной ссылки при наведении, а граница наведения не соответствует области исходной границы. Я уверен, что это связано с заполнением, но я перепробовал все, что мог придумать. Смотрите пример кода — http://jsfiddle.net/mGjs6/3 /

Вам нужно изменить

#signup a:hover

Для

#signup:hover

и удалите width

 #signup:hover {
    border: solid 2px #55971e;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
  

Пример: http://jsfiddle.net/jasongennaro/mGjs6/6/

То же самое с #clientarea

Проблема с несоответствием заключалась в том, что у одного элемента #signup была граница, но затем вы меняли границу дочернего элемента ( a ) при наведении.

Редактировать

Согласно комментарию

Однако при наведении курсора текст все равно перемещается, чтобы скорректировать увеличенную границу. Текст должен оставаться фиксированным с изменением только границы.

Это происходит потому, что размер границы увеличивается. Это то, что выталкивает текст вниз на пиксель (это увеличение размера границы)

Вы не можете исправить это идеально. Лучше изменить цвет границы или фона.

Пример 2: http://jsfiddle.net/jasongennaro/mGjs6/9/

(Наведите курсор на оба, чтобы увидеть предложения)

РЕДАКТИРОВАТЬ 3

Я понял это: уменьшите padding на пиксель при наведении, и все это работает

 #signup:hover {
    border: solid 2px #55971e;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding:3px 4px; //ADD THIS
}
  

Пример 3: http://jsfiddle.net/jasongennaro/mGjs6/10/