Chrome自动添加隐藏CSS导致页脚div仅在该浏览器无法显示问题求助

问题原因 #

• 浏览器扩展注入样式：广告拦截、隐私保护类的Chrome扩展会按照预设规则，给匹配广告特征的DOM元素自动注入display: none !important样式。这类运行时注入的样式在DevTools中会显示归属为当前页面的index.html，不会出现在你本地的源码中。你之前放置过SVG的页脚div如果类名、ID、尺寸刚好匹配扩展的拦截规则（比如类名包含ad、promotion等广告相关关键词，尺寸为常见广告位规格），即便移除了SVG，只要元素特征符合规则就会被隐藏。
• Chrome本地缓存残留：你之前部署过带SVG版本的页面，Chrome缓存了旧的内联样式或相关注入规则，更新源码后缓存未完全清理也会触发该问题。
• 构建/运行时动态注入：如果你的项目使用了SSR框架、或者配置了自动注入样式的构建插件、测试调试插件，可能会在构建或运行时动态插入该隐藏样式，不会直接写死在index.html源码中。
• Chrome实验性功能异常：如果开启了Chrome的广告隐私保护、自动隐藏非核心内容等实验性功能，也可能出现浏览器自动隐藏页面元素的情况。

解决方法 #

• 排查扩展问题：打开Chrome无痕模式访问你的站点，如果无痕模式下页脚div显示正常，即可确定是扩展导致的。逐个禁用已安装的扩展定位到触发规则的扩展后，你可以修改页脚div的类名、ID、尺寸避免匹配拦截规则，或者调整对应扩展在你站点的拦截权限即可。
• 清理浏览器缓存：按Ctrl+Shift+Delete（Mac系统按Command+Shift+Delete）打开清除浏览数据面板，清除时间范围选择「所有时间」，勾选「缓存的图片和文件」「Cookie及其他网站数据」，清除后重新访问页面验证。
• 排查项目代码：全局搜索项目JS代码中有没有操作style.display的逻辑，尤其是针对页脚元素的动态样式修改逻辑；同时检查构建配置，确认是否有自动注入样式、条件渲染的相关配置会在Chrome环境下隐藏对应元素。
• 强制样式覆盖（应急方案）：如果暂时无法定位根源，可以给对应页脚div添加更高优先级的样式display: block !important;，保证你的样式加载顺序晚于注入样式即可覆盖自动添加的隐藏规则。
• 跨设备验证：找其他使用Chrome的用户访问你的站点，如果其他人访问正常，仅你的Chrome出现该问题，即可确定是你本地Chrome的扩展或配置导致，和站点源码无关。

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