dev标签不显示且CSS样式无效，浏览器控制台报错求助

问题 #

• 设置背景色后<dev>标签仍不显示
• 在CSS中设置了width和height属性，但通过开发者工具检查发现<dev>标签未应用这些样式

浏览器控制台报错信息：

positioning.html:1 Refused to apply style from 'http://127.0.0.1:5500/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
positioning.html:1 Refused to apply style from 'http://127.0.0.1:5500/normalize.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
positioning.html:1 Unchecked runtime.lastError: The message port closed before a response was received.
positioning.html:1 Unchecked runtime.lastError: The message port closed before a response was received.
positioning.html:1 Unchecked runtime.lastError: The message port closed before a response was received.
positioning.html:45 Live reload enabled.
favicon.ico:1 
 Failed to load resource: the server responded with a status of 404 (Not Found)
positioning.html:1 Refused to apply style from 'http://127.0.0.1:5500/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
positioning.html:1 Refused to apply style from 'http://127.0.0.1:5500/normalize.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND

解决方案 #

核心原因 #

浏览器拒绝加载CSS文件，因为服务器返回的MIME类型是text/html而非正确的text/css，导致样式完全无法生效——这就是<dev>标签不显示、样式不应用的根本原因。

修复步骤 #

• 检查文件路径：确认style.css和normalize.css存在于项目根目录，文件名拼写完全一致（注意大小写区分）。
• 重启或配置服务器：如果用Live Server这类工具，重启服务器让它正确识别CSS文件的MIME类型；若用自定义服务器，需配置.css后缀对应text/css类型，避免将CSS请求误导向HTML页面。
• 忽略无关错误：控制台里的消息端口错误、favicon 404、source map加载失败不影响样式，可暂时忽略。
• 验证修复：刷新页面后检查控制台是否仍有CSS加载错误，再确认<dev>标签的样式是否正常应用。

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