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-语句。