CSS样式文件不起作用原因分析

常见原因

1、CSS文件未找到

有时因样式文件路径设置错误、静态资源被拦截等原因可能导致样式文件没有加载到，这种情况可以通过按F12查看样式文件是否有加载到，如果没有加载到（例如：样式文件请求返回404），则需要修改样式文件路径，来确保样式文件可以被加载到。

2、CSS样式文件请求返回结果Content-type错误

这种情况通常是由过滤器引起的，过滤器对所有请求进行处理，如果错误设置了请求的返回类型(Content-type)，则即使CSS样式文件请求能成功访问到，但由于CSS文件返回结果的Content-type错误，浏览器也会拒绝渲染该文件。

案例分析

最近在一个项目中就遇到这样一个问题，项目使用jsp+servlet开发，项目启动成功后，CSS样式文件可以加载到，但样式就是不起作用，经过调试后发现，在编码过滤器中，对所有请求的Content-Type做了错误的修改，如下：

 

这将导致所有的请求结果都以 text/html 类型进行返回，因此CSS文件也被以 text/html 格式返回，由于CSS文件的 Content-type 不正确，所以，虽然CSS文件可以找到，但浏览器将拒绝渲染该资源。

 

总结

我们可以看到，如果 CSS 样式的 Content-Type 设置不正确，浏览器就会拒绝渲染该资源。其实，不只是 CSS 样式文件如此，JS 脚本文件也是同样。究其原因，还是为了安全。通过对服务器返回资源的 Content-Type 进行验证，可以在一定程度上避免跨站脚本攻击等攻击手段。

参考自：https://zzz.buzz/zh/2016/03/27/set-correct-content-type-for-stylesheets/