当前位置：文江博客话题详情

CSS 转换在 Safari、Chrome 和 Firefox 中闪烁并显示 a:visited，但在 Opera 中则不然

发布于 2024-12-10 05:19:12 字数 276 浏览 0 评论 0原文

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

还有其他人注意到这一点吗？当您在 a:link 上放置颜色过渡时，a:visited 会在显示 a:hover 颜色之前过渡到 a:link 颜色。看看：

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

残花月 2024-12-17 05:19:12

我已经为这个问题绞尽脑汁有一段时间了。

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

好的，那么会发生什么情况，有时在加载/刷新链接上带有颜色过渡的页面时，颜色首先从默认浏览器链接颜色过渡到 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 文件，它甚至可以工作。

希望这有帮助！

I have been banging my head around this problem for a while.

The thing is, that this problem is actually hard to reproduce.

OK, so what happens, sometimes while loading/refreshing a page with color transition on links, the color is first transitioned from the default browser link color, to the CSS defined color. It actually doesn't happen for me, when I open the HTML from disk, but if I put it in a server (even local server), then this problem shows up.

To reproduce the problem, create an HTML, add a stylesheet and define a transition for links, something like this:

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

...and then include the stylesheet in your HTML.

Put the files on a server, and try opening the page in Chrome, try refreshing the site, sometimes you should first see a transition from the default blue color, when the pages loads.

After deconstructing some sites, where there seemed to be no problem with this, I came up with this simple solution.

If you include some Javascript files too, then just place Javascript includes AFTER your CSS includes.

It even work if you just include an empty JS file, after you stylesheet.

Hope this helps!

回复收藏 0 原文