webkit css轉換

Question

在網站上嘗試一些webkit轉換並遇到問題。我的鏈接懸停狀態添加1px邊框並減少填充，以便定位保持不變。正常工作正常，但不添加轉換時。顯然，因爲我只做了1px的更改，所以會突然發生，但它不會同時發生 - 填充在邊界之前會發生變化，所以整個事情都會「搖擺」。

#loginbuttons a { 
    text-decoration: none; 
    padding: 5px; 
    -webkit-transition: all 0.5s ease; 
} 

#loginbuttons a:hover { 
    padding: 4px; 
    border: 1px solid black; 
    background-color: yellow; 
} 

我發現來解決這個問題，最好的辦法是有一個白色的邊框上的正常狀態，這樣它只是改變了顏色，但我希望它是透明的。另外，有沒有什麼方法可以將背景顏色從白色而不是黑色褪色而不設置白色背景色？再次，我希望它是透明的，但它看起來很古怪，然後變成黃色！

我我的導航菜單上得到了轉變，以及，同樣的事情發生（這一次改變padding和margin）：

#nav ul li a { 
    color: white; 
    padding: 10px 10px 8px 10px; 
    margin: 0 5px; 
    border: 1px solid black; 
    opacity: 0.85; 
    -webkit-transition: all, 0.5s; 
} 

#nav ul li a:hover, #nav ul li a.selected { 
    color: black; 
    padding: 13px 13px 11px 13px; 
    margin: 0 2px; 
    text-shadow: 2px 2px 4px white, -2px -2px 4px white, 2px -2px 4px white, -2px 2px 4px white; 
    opacity: 1; 
    -webkit-box-shadow: 0px 0px 8px #888; 
} 

嗯，只是試圖碰撞值了一下，即使使用線性過渡將邊距和填充更改爲15px，仍然會產生小（看起來像1或2像素）毛刺。同樣的事情發生在safari和chrome中。

任何人有任何想法如何使它光滑？或者解決顏色問題？認爲它會更好地使用jQuery（忽略跨瀏覽器支持！）？不妨去看看，如果同樣的事情發生了歌劇...

編輯：好像10.5A歌劇發佈用於蘋果仍然不支持轉換...

Answer 1

首先，它可能是值得嘗試border: 1px solid transparent，以便過渡只更改邊框的顏色。在這個意義上，填充保持不變，並且瀏覽器的猜測較少。如果transparent不起作用，則alpha值爲0的任何顏色（例如rgba(0, 0, 0, 0)）也是可以接受的。

Opera Presto 2.3 supports transitions，但它要求不同的陳述 - -o-transition-property等。希望這個鏈接能夠很好用。 Firefox does CSS transitions too，他們有a demo page。要在Firefox中進行轉換，必須使用-moz-語句。