css - 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;
}

我发现解决这个问题的最好方法是在正常状态下有一个白色边框，这样它只会改变颜色，但我希望它是透明的。另外，有没有办法在不设置白色背景色的情况下从白色而不是黑色淡入背景色？同样，我希望它是透明的，但它看起来很奇怪，先是灰色，然后是黄色!

我的导航菜单上也有转换，同样的事情发生了(这次改变了填充和边距):

#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;
}

嗯，只是尝试将值提高一点，即使使用线性过渡将边距和填充更改为 15 像素，仍然会产生一个小的(看起来像 1 或 2 像素)故障。在 safari 和 chrome 中也会发生同样的事情。

有人知道如何让它顺利吗？或者解决颜色问题？认为使用 jquery 会更好(忽略跨浏览器支持!)？可能会去看看歌剧是否发生了同样的事情......

编辑:似乎 mac 的 10.5a opera 版本仍然不支持转换...

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