1

在网站上尝试一些 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 歌剧版本仍然不支持过渡......

4

1 回答 1

2

首先，可能值得尝试border: 1px solid transparent让过渡只改变边框的颜色。从这个意义上说，填充保持不变，并且浏览器猜测更少。如果transparent不起作用，例如 alpha 值为 0 的任何颜色rgba(0, 0, 0, 0)也是可以接受的。

Opera Presto 2.3 支持转换，但它要求不同的语句——-o-transition-property等。希望这个链接会很好用。 Firefox 也进行 CSS 转换，并且他们有一个演示页面。要在 Firefox 中进行转换，必须使用-moz-语句。

于 2010-02-21T02:41:48.220 回答