Html 由于某些原因，在页面加载时开始转换_Html_Css_Css Transitions

Html 由于某些原因，在页面加载时开始转换

html css

Html 由于某些原因，在页面加载时开始转换,html,css,css-transitions,Html,Css,Css Transitions,更新：当我在内部放置CSS时，问题就消失了。我在我的chrome上打开了开发工具，比较了重新加载页面时发生的事情。第一幅图像使用内部CSS，第二幅图像使用外部样式表，您可以看到背景色属性的不同结果：初始帖子：我不知道为什么会发生这种情况，下面是一个例子。基本上，a需要一些时间才能完全显示在页面上 “完全”显示所需的时间与transition:background 5s中指定的持续时间相同如5秒钟内所示这是另一个没有观察到效果的相同代码，我也在同一个浏览器中打开了它这是我在VisualS

更新：当我在内部放置CSS时，问题就消失了。我在我的chrome上打开了开发工具，比较了重新加载页面时发生的事情。第一幅图像使用内部CSS，第二幅图像使用外部样式表，您可以看到

背景色

属性的不同结果：

初始帖子：我不知道为什么会发生这种情况，下面是一个例子。基本上，

需要一些时间才能完全显示在页面上

“完全”显示所需的时间与

transition:background 5s中指定的持续时间相同如5秒钟内所示
这是另一个没有观察到效果的相同代码，我也在同一个浏览器中打开了它
这是我在VisualStudio和Chrome中的代码，在Edge中观察到了相同的行为，但在Firefox中没有观察到，在Firefox中它只是按照它应该的方式加载，并且：hover
效果正常工作。在撰写本文时，所有3种浏览器都将更新为其最新版本
只有当我链接到外部CSS样式表时才会发生这种情况。当我将css复制到html文件时，问题就消失了


CSS
HTML


我解决了这个问题，一直在通过谷歌寻找答案。解决方案是在html文件中添加以空格分隔的
打开和关闭标记。显然，这是前面提到的浏览器中的一个bug。
我解决了这个问题，一直在通过谷歌寻找答案。解决方案是在html文件中添加以空格分隔的
打开和关闭标记。很明显，这是前面提到的浏览器中的一个bug。我刚刚在chrome上测试过（下载了您共享的html文件），它看起来很好，您确定没有其他元素吗？非常确定，如果您说它工作正常，我不知道我遗漏了什么。在过去的几个小时里，我一直在努力解决这个问题，但什么都没有。只有当我链接到外部CSS样式表时，才会发生这种情况。当我将css复制到html文件时，问题就消失了！！！你确定没有任何浏览器扩展会弄乱css吗？也许可以试着在一个私人标签中测试这个。你能显示完整的样式表吗？我已经通过将这些摘录转换成内联代码片段来测试了它们，效果很好。我刚刚在chrome（下载了您共享的html文件）上进行了测试，结果似乎很好，您确定没有其他元素吗？非常确定，如果您说它很好，我不知道我遗漏了什么。在过去的几个小时里，我一直在努力解决这个问题，但什么都没有。只有当我链接到外部CSS样式表时，才会发生这种情况。当我将css复制到html文件时，问题就消失了！！！你确定没有任何浏览器扩展会弄乱css吗？也许可以试着在一个私人标签中测试这个。你能显示完整的样式表吗？我已经通过将这些摘录转换成内联代码片段对其进行了测试，效果很好。
a {
  color: #fff;
  border: none;
  margin: 20px;
  padding: 10px 20px;
  display: inline-block;
  font: bold 18px sans-serif;
  background: #fd7c2a;
  text-decoration: none;
  -webkit-transition: background 5s; /* For Safari 3.0 to 6.0 */
  transition: background 5s; /* For modern browsers */
}

a:hover {
  background: #3cc16e;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="" />
    <!-- Specifies a description of the page. Search engines can pick up this description to show with the results of searches -->
    <meta name="keywords" content="" />
    <!-- Specifies a comma-separated list of keywords - relevant to the page -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title></title>
  </head>

  <body>
    <p><a href="#">Hover on me</a></p>
  </body>
</html>