CSS: сделать легенду fieldset при наведении курсора БЕЗ перемещения элемента div под ним?

Question

у меня есть fieldset с легендой. я хочу, чтобы легенда стала ярче при наведении, однако она сдвигает содержимое под ним на несколько пикселей вниз (что немного раздражает). как я могу это исправить?

вот их стили:

fieldset {
    border: none;
    border-top: 1px solid;
}
legend {
    font-size: 16px;
}
.collapsable {
    cursor: hand;
    cursor: pointer;
}
.collapsable:hover {
    font-weight:bold;
}

вот пример html:

<fieldset class="restrictiveOptions">

  <legend class="collapsable">
    <img width="12" height="12" title="Collapse" alt="Collapse"
      class="toggle" src="branding/default/images/collapse.gif"> Restrictive Options
  </legend>

  <div style="">
    ...

спасибо!

Answer 1

Просто дайте ему line-height, и оно должно остаться на месте ..

Answer 2

Может, дать легенде заданную высоту, достаточную для содержания как жирного, так и не жирного содержимого?

Answer 3

Добавить отрицательное нижнее поле к легенде при наведении.

Редактировать: Также вы можете подумать о том, чтобы не использовать жирный шрифт при наведении курсора, поскольку это часто вызывает проблемы такого рода. Возможно, вам лучше изменить другое свойство, например цвет фона.

Answer 4

Попробуйте добавить к легенде вертикальный отступ (1 или 2 пикселя) и затем при наведении удалите этот вертикальный отступ. Это должно компенсировать сдвиг, вызванный жирным шрифтом.

При этом, вероятно, будет практически невозможно сделать так, чтобы это отображалось последовательно во всех браузерах, поскольку сдвиг определяется тем, как браузер отображает жирный шрифт.