Chrome/Firefox中仅元素审查时显示背景色的问题求助

• 在Chrome/Firefox中直接打开HTML文件时，.header__shop对应的Shop链接背景色不显示
• 打开开发者工具审查元素或悬停时，背景色突然出现
• 添加!important声明无效，截图能看到背景色但肉眼直接浏览时看不到

原因分析 #

这个问题是浏览器渲染优化引发的样式未正确应用，结合代码来看核心触发点：

1. header a:link设置了transition: all 0.5s，过渡范围包含背景色，导致初始渲染时浏览器未正确计算背景色的初始状态
2. 固定定位的header未设置宽度，容器收缩引发布局渲染异常

修复步骤 #

1. 缩小过渡范围：将transition: all 0.5s改为仅针对文字颜色，避免不必要的背景色过渡干扰：

header a:link {
  transition: color 0.5s; /* 只过渡color属性，而非全部属性 */
}

2. 给固定定位header设置宽度：确保容器占满屏幕宽度，避免布局收缩：

.header {
  position: fixed;
  top: 0;
  width: 100%; /* 添加宽度设置 */
}

3. 提升.header__shop样式优先级：确保样式不被其他规则覆盖：

header a.header__shop {
  background-color: var(--header-active-background);
  font-weight: bold;
  color: var(--black) !important;
}

修改后的完整CSS代码 #

:root {
  --header-active-background: #f2f2f2;
  --header-link-color: #00000099;
  --black: #000000;
}
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html {
  font-size: 62.5%;
}
header a:link,
header a:visited {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
  color: var(--header-link-color);
  font-size: 1.2rem;
  padding: 0 1.2rem;
  letter-spacing: 0.03125rem;
}
header a:link {
  transition: color 0.5s; /* 修改过渡属性 */
}
header a:hover {
  color: rgba(0, 0, 0, 0.95);
}
/* UTILS */
.margin-left-small {
  margin-left: 2rem !important;
}
.margin-right-small {
  margin-right: 2rem !important;
}
/* header */
.header__logo img {
  height: 45%;
}
.header {
  position: fixed;
  top: 0;
  width: 100%; /* 添加宽度 */
}
.header__top-ribbon {
  height: 6.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* 提升优先级 */
header a.header__shop {
  background-color: var(--header-active-background);
  font-weight: bold;
  color: var(--black) !important;
}
.header__logo {
  padding: 0 !important;
}

内容的提问来源于stack exchange，提问作者Sourabh Yadav