樣式表邊框不能在行高亮上移動？

我正在創建一個使用表格的下拉菜單。我爲行高亮添加了jQueryUI提供的「ui-state-highlight」類。樣式表邊框不能在行高亮上移動？

我的問題是，現在，每當一個項目被突出顯示，它使菜單的大小改變幾個像素。我試圖使用填充來解決這個問題，但它似乎不工作。 JSFiddle

更一般的是，如何在不顯式設置高度和寬度的情況下調整子元素的大小時保持相同的寬度/高度？

您獲得的防抖效果是因爲邊界1px的的。當您使用mouseenter時會添加邊框，並在導致該效果的mouseleave時將其刪除。

您可以通過廉價的詭計避開它，

//Change white if the background color of your screen is different. 
tr { border: 1px solid white; }

編輯：您可以使用透明的顏色，以避免與什麼背景顏色匹配。

tr { border: 1px solid transparent; }

2012-01-20 19:30:22

這是一個很酷的伎倆，但正如你指出的那樣，它是一種便宜。此外，我正在使用的網站使用jQuery themeroller，因此用戶可以隨時更改樣式，以便背景可能會發生變化。是否可以設置隱形邊框？或者我應該修改父行的填充或行懸停？ – stinkycheeseman

是的，你可以使用透明顏色'tr {border：1px solid transparent; }」。 –

已更新。

爲TR元素添加一種新的樣式，一個與容器背景相匹配的「不可見」邊框。然後在懸停時，它不會添加到高度，而是邊框顏色正在改變。

tr { border:#fff solid 1px; }

2012-01-20 19:24:59 rebz

看起來像其他人剛剛發佈了同樣的答案，因爲我更新我的。 – rebz

回答