CSS：使字段集图例在悬停时变为粗体，而不移动其下方的div？

我有一个带有传奇的现场设置。我想让图例在悬停时加粗，但是，它会将下面的内容向下移动几个像素（这有点烦人）。我怎样才能修好它

以下是它们的样式：

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="">
    ...

限制性选择
...

---

谢谢

可能为图例提供一个足以同时包含粗体和非粗体内容的设置高度？

可能为图例提供一个足以同时包含粗体和非粗体内容的设置高度？

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

---

也就是说，几乎不可能在所有浏览器中都一致地显示此内容，因为转换取决于浏览器呈现粗体字体的方式。

尝试在图例中添加一些垂直填充（1或2像素），然后悬停，删除此垂直填充。这将补偿粗体文本造成的偏移

---

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

在悬停时为图例添加负底边距

---

<>编辑：也可以考虑不要在悬停上使用粗体，因为这通常会导致这些问题。您最好更改另一个属性，如背景色。

在悬停时为图例添加负底边距

---

<>编辑：也可以考虑不要在悬停上使用粗体，因为这通常会导致这些问题。您最好更改另一个属性，如背景色。

只需给它一个

行高，它应该保持静止。
只需给它一个
行高，它应该保持静止。
下面的内容现在保持静止，但图例中的图像会跳上一个像素。我该怎么解决呢？@Garret，你能在网上的某个地方举个例子吗，因为我无法重现这个问题……不，对不起。但是我可以告诉你，图像有：
垂直对齐：基线并且是12x12。似乎当我将垂直对齐更改为顶部或除基线外的大多数其他选项时，它不会移动。但是，我希望图像与文本对齐，基线似乎正在这样做。我怎样才能妥协=S@Garrett，你试过把线的高度增加一点吗？猜猜看。下面的内容现在保持静止，但图例中的图像会上升一个像素。我该怎么解决呢？@Garret，你能在网上的某个地方举个例子吗，因为我无法重现这个问题……不，对不起。但是我可以告诉你，图像有：
垂直对齐：基线并且是12x12。似乎当我将垂直对齐更改为顶部或除基线外的大多数其他选项时，它不会移动。但是，我希望图像与文本对齐，基线似乎正在这样做。我怎样才能妥协=S@Garrett，你试过把线的高度增加一点吗？我只是在猜。。