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个像素），然后在悬停时删除此垂直填充。这应该可以弥补粗体文本造成的偏移。

话虽如此，在所有浏览器中显示一致可能几乎是不可能的，因为转换是由浏览器呈现粗体字体决定的。

Answer 4

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

编辑：您也可以考虑不在悬停时使用粗体，因为这通常会导致这类问题。你可能最好更改另一个属性，比如背景颜色。

CSS：在悬停时将字段集图例设为粗体而不移动它下面的div？

4 个答案: