CSS 过渡闪烁 :visited in Safari, Chrome 和 Firefox，但不是 Opera

Question

(对于支持 CSS transitions 的浏览器，包括最新版本的 Firefox、Safari 和 Chrome。奇怪的是，这个问题在 Opera 中没有出现。)

有没有人注意到这一点？当您在 a:link 上设置颜色转换时，a:visited 会在显示 a:hover 颜色之前转换为 a:link 颜色。检查一下:

http://jsfiddle.net/Mgzv9/2/

可以避免这种颜色闪烁吗？

Answer 1

我已经为这个问题苦苦思索了一段时间。

问题是，这个问题实际上很难重现。

好的，那么会发生什么，有时在加载/刷新链接上有颜色转换的页面时，颜色首先从默认浏览器链接颜色转换为 CSS 定义的颜色。当我从磁盘打开 HTML 时，它实际上并没有发生在我身上，但如果我将它放在服务器(甚至本地服务器)中，那么这个问题就会出现。

要重现该问题，请创建一个 HTML，添加一个样式表并为链接定义一个转换，如下所示:

a {
  color: red;
    -webkit-transition: color .5s linear;
    -moz-transition: color .5s linear;
    -o-transition: color .5s linear;
    -ms-transition: color .5s linear;
    transition: color .5s linear;
}

a:hover {
  color: green;
}

...然后将样式表包含在您的 HTML 中。

将文件放在服务器上，尝试在 Chrome 中打开页面，尝试刷新网站，有时您应该首先看到页面加载时从默认蓝色过渡。

在解构了一些网站之后，在这方面似乎没有问题，我想出了这个简单的解决方案。

如果您还包含一些 Javascript 文件，则只需将 Javascript 包含在之后您的 CSS 包含。

如果您在样式表之后只包含一个空的 JS 文件，它甚至可以工作。

希望这对您有所帮助!