css加载失败的原因是什么?

更新日期: 2019-11-28 阅读: 3.3k 标签: 加载

有很多刚刚接触css的新手有时会遇到css加载失败这个问题,但测试时,网页上没有显示该样式的问题,这就说明CSS加载失败了。那么为什么会加载失败?css加载失败的原因是什么?

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


1、网络原因

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


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

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

一般都是通过link加上你的路径来实现,具体可以看下代码:

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


3、if造成失败

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


4、另类CSS加载失败

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


5、浏览器导致

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


6、编码不对

如果不是上述问题则看一看你的CSS文件的字符集是否和你的调用CSS文件的网页的字符集是否一致,就是charset属性那里。

在你使用浏览器进行浏览效果的时候,ie浏览器中菜单栏上有一个“查看--编码”,在查看编码上面UTF-8或者GBK看看是不是同一个编码。可能是编码不一致所造成。


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/7983

相关推荐

js判断异步引入的js文件是否加载完毕

在正常的加载过程中,js的加载都是同步的,也就是在加载过程中,浏览器会阻塞接下来的内容的加载。这时候我们就要用到动态加载,动态加载是异步的,如果我们在后边要用到这个动态加载的js文件里的东西

页面加载完成事件 -onload的五种写法

在js和jquery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式(其中有的只是书写方式不一样)。使用jQuery的$(function){};document加载完成后就执行方法。

vue图片预加载

图片预加载能够使得用户在浏览后续页面的时候,不会出现图片加载一半导致浏览不流畅的情况。项目打开的时候要对图片进行预加载,在App.vue里面的beforeCreate添加预加载程序

Vue实现懒加载

什么叫懒加载?就是只有在访问的时候才会进行请求加载,这可以有效提升网站打开的速度,加上这行,就可以做到懒加载↓===括号里的路径改成组件的路径,然后就不需要在上面import了

解决js/css文件缓存,让浏览器去服务器重新加载最新js/css

在引用文件末尾加上一个参数,让浏览器知道这个文件跟上一个文件是不同的,让浏览器去服务器重新加载最新的,在引用的js、jsp、css、html等文件的地址后面加上参数的作用:

小程序页面预加载技术

之前看到一篇文章,《微信小程序之提高应用速度小技巧》,是讲如何实现小程序在触发页面跳转前就请求协议,利用跳转页面的短短200~300ms的时间,获取到数据并渲染到页面上,实现数据在小程序页面中预加载。这种技术

纯CSS实现加载转圈样式

不同的项目中对于等待加载时转圈圈的样式是不同的,有的是传统的转圈的gif图片,见得比较多的是将转圈圈的换成了可爱的图标。有时候项目中加入等待加载的图片会很违和,不符合美观,所以需要用CSS做一个。

html/css 滚动到元素位置,显示加载动画

每次滚动到元素时,都显示加载动画,如何添加?以上图中的动画为例,添加俩个左右容器,将内容放置在容器内部。

css3加载动画 - 好看的loading效果的实现

loading效果在实际开发中是很常见的,尤其是在Ajax请求的时候,可以给用户一个很好的交互体验。通过css3实现loading动画,主要用到的属性:

小程序如何使用分包加载

在小程序开发的过程中,小程序的体积会随着版本的迭代变的越来越大,这时候我们就希望能够将小程序分成多个包从服务器下载,这样既可以加快首屏的渲染也便于后续按需加载的实现

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!