CSS:在悬停时将字段集图例设置为粗体，而不移动下方的div？

Question

我有一个带有图例的字段集。我希望图例在悬停时是加粗的，然而，它会将下面的内容向下移动几个像素(这有点烦人)。我怎么才能修复它？

以下是它们的样式：

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

尝试向图例添加一些垂直填充(1或2像素)，然后在悬停时删除此垂直填充。这应该会补偿粗体文本造成的偏移。

也就是说，让它在所有浏览器上一致显示几乎是不可能的，因为转换是由浏览器呈现粗体字体的方式决定的。