CSS：將fieldset圖例放在懸停上而不移動下面的div？

我有一個帶有圖例的字段集。我希望圖例在盤旋時增加，然而，它會把它下面的內容向下移動幾個像素（這有點令人討厭）。我該如何解決它？CSS：將fieldset圖例放在懸停上而不移動下面的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=""> 
    ...

的感謝！

來源

2010-07-15 Garrett

只要給它一個line-height，它應該仍然停留..

來源

2010-07-15 13:04:38

它下面的內容現在仍然停留，但傳說中的形象跳起像素。我該如何解決這個問題？ – Garrett 2010-07-15 13:17:08

@Garret，你可以把網上的某個地方的例子，因爲我不能重現該問題.. – 2010-07-15 13:46:04

不，對不起。但我可以告訴你，圖像有： 'vertical-align：baseline;'並且是12x12。看起來，當我更改垂直對齊頂部或除基線以外的大多數其他選項，它不會移動。不過，我希望圖像與文本對齊，並且基線似乎正在這樣做。我如何妥協？ = S – Garrett 2010-07-15 16:58:47

也許給傳說一個足以包含粗體和非粗體內容的高度？

來源

2010-07-15 13:01:05 Svish

嘗試添加一些垂直填充到您的圖例（1或2像素），然後懸停，刪除此垂直填充。這應該可以彌補由粗體文本引起的轉變。

這就是說，它可能幾乎不可能在所有瀏覽器中始終如一地顯示，因爲這種轉換是由瀏覽器如何渲染粗體字體決定的。

來源

2010-07-15 13:01:17 Pat

向懸停圖例添加負底部邊距。

編輯：你也可以考慮在懸停時不使用粗體，因爲這往往會導致這些問題。改變另一個屬性如背景顏色可能會更好。

來源

2010-07-15 13:02:25 edeverett

CSS：將fieldset圖例放在懸停上而不移動下面的div？

回答

相關問題