当我们在浏览网页时,偶尔会看见网站样式加载不正常,加载不出来的情况。对于前端初学者来说,可能也会出现css样式不能正常调用或显示的问题。那么想要去解决这样的问题,就需要知道出现这样问题的原因。
下面我们来看看css加载不正常的原因及解决办法。
路径错误
在外部引用CSS样式时,路径选择错误,CSS样式就会不加载。所以在写CSS路径时一定要细心
解决办法:引用正确的css路径
HTML页面编码与CSS编码不同(如HTML为gbk,CSS为utf-8)
看看CSS文件的字符集是否和调用CSS文件的网页的字符集是否一致,就是charset属性那里。
在你使用浏览器进行浏览效果的时候,ie浏览器中菜单栏上有一个“查看--编码”,在查看编码上面UTF-8或者GBK看看是不是同一个编码。可能是编码不一致所造成,改为同一编码。
浏览器兼容性问题
在CSS3中有很多属性对浏览器有兼容问题,比如-moz-为前缀的只适合Firefox 浏览器,-webkit-为前缀的适合Chrome浏览器等等,如果在代码中没有考虑兼容性问题,网页效果依旧不会加载出来
例
div{
width: 100px;
height:100px;
background: pink;
animation: demo 5s ;
-moz-animation: demo 5s;/* Firefox */
-webkit-animation: demo 5s;/*Chrome */
}
@-webkit-keyframes demo{
from{background: pink;
}
to{background: hotpink;}
}
}
因为chrome浏览器仅只支持以-webkit-开头的前缀,所以代码在浏览器中除了使用-webkit-以外的其他属性都被浏览器过滤掉了
网络原因
IIS空间不足、浏览者网速慢、空间速度慢、浏览器缓存过多等网络因素是造成CSS加载失败的原因之一。
解决办法:更换网络、刷新缓存
代码不兼容
在CSS中写的属性可能随着浏览器的不断更新而不支持,或者是本身代码语法就有问题
更多前端开发知识,请查阅 HTML中文网 !!