CSS背景颜色在谷歌浏览器中给出奇怪的结果答案

【问题标题】：CSS background-color giving weird results in google chromeCSS背景颜色在谷歌浏览器中给出奇怪的结果
【发布时间】：2017-11-23 14:19:24
【问题描述】：

我更改了 background-color css 属性。文件如下：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css">
    <title>test</title>
  </head>
  <body>
    <h1>hi</h1>
  </body>
</html>

main.css

body {
  background-color: blue;
}

在铬：

在火狐中：

谁能告诉我怎么了？

这是 chrome 上的开发者工具视图： click here

【问题讨论】：

这是整个main.css吗？
是的。就是这样。
蓝色的渲染方式不同可能仍然可以接受，但我很好奇紫色是从哪里来的
但我很好奇紫色是从哪里来的 @Swellar 和我要问的问题一样。
也是div的宽高

标签： html css google-chrome firefox

【解决方案1】：

您是否尝试过使用十六进制值而不是颜色名称“蓝色”？

或许可以试试：

background-color: #0000FE;

我相信这是您使用的蓝色的十六进制值。

【讨论】：

我把十六进制值放在那里。仍然颜色相同的输出。外光颜色为#6F97FE。里面的黑色方块是#6F00FE。
这可能是您的软件以某种方式干扰 chrome 以产生此输出的问题吗？我知道有时在启动 html 文件之前，我最后一次工作的对象周围会出现边框或视觉效果。

【解决方案2】：

通过查看页面中的源码，尝试清除缓存或刷新浏览器中的css文件。

有时缓存可能包含以前程序的一些定义。

【讨论】：

我从开发人员工具的应用程序选项卡中清除了站点数据和缓存。仍然没有变化。
通过开发者工具在浏览器中打开css文件并刷新css页面然后再试一次
就这么做了。没有改变。此外，此故障仅出现在特定颜色上，例如。如果我设置背景颜色：粉红色；那么输出就正常了。
你能分享@开发者工具窗口中的代码吗..请检查
我把它贴在这个问题上。