常见原因
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/