浅谈CSS加载失败的6个原因-css教程-PHP中文网

首页

web前端

css教程

浅谈CSS加载失败的6个原因

yulia

Sep 20, 2018 am 11:25 AM

css

在页面布局时，都主张结构与样式分离，但是有些时候，css样式不能成功加载，这是为什么呢？这篇文章主要讲了CSS加载失败的6个原因，有需要的朋友可以参考一下，希望对你有用。

有很多刚刚接触css的新手有时会遇到css加载失败这个问题，但测试时，网页上没有显示该样式的问题，这就说明CSS加载失败了。出现这种状况一般是因为的css路径书写错，或者是在浏览器中禁止掉了css的加载，可以重新启动浏览器刷新，在文件中css的调用，一般都是通过link加上你的路径来实现，具体可以看下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel=&#39;stylesheet&#39; type=&#39;text/css&#39; href=&#39;./css/index1.css&#39;>//注意好文件名的书写就没问题了。

造成css加载失败的原因有很多，这可能跟你代码出错，浏览器、路径、编码等等都是有关联的。所以在具体情况具体分析。最常见的失败原因有以下几类：

1.网络原因

IIS空间不足、浏览者网速慢、空间速度慢等网络因素是造成CSS加载失败的原因之一，其具体表现为：当我们打开网页时，网页布局完整，但却没有任何布局样式显示。

2.路径错误或者代码不兼容

如果网页打开时，没有显示CSS设定的样式，只以原始状态显示。那么就可能是我们CSS文件路径出错或者CSS代码不兼容了。　

3.if造成失败

第三个原因是，我们编在写CSS时，可能使用了if判断语句对什么浏览器调用什么CSS文件时疏忽造成if调用的混乱，导致在某些浏览器上能正常显示，在某些浏览器上不能正常显示。对于这个原因，解决方法就是好好检查造成CSS加载失败的if判断设置。

4.另类CSS加载失败

何为另类CSS加载失败？这是由于我们本身的CSS代码写法有问题，没有设置好造成在各浏览器显示不同布局差距效果。在CSS里面，我们称为css hack。

5、浏览器导致

在Chrome浏览器的错误控制台下看看css文件有没有加载进来，确定已加载的话，检查元素的类名与CSS中定义的类名是否相同。可能局限于ie浏览器，你用谷歌浏览器就会出现错误。所以尝试换个浏览器，然后等会在用，也可能修复故障。

6、编码不对