常见原因

1、CSS文件未找到

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

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

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

案例分析

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

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

 

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

 

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

总结

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

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