H5引用外部样式css文件踩坑实战经验(link css文件不加载显示)

H5引用外部样式css文件踩坑实战经验(link css文件不加载显示)

389发表于2020-05-21

这两天踩了一个引用外部样式css文件得坑,今天分享给大家。

使用代码:

<link href="/Content/font1825501/iconfont.css?v=20200520" rel="stylesheet" type="text/css" />

现象如下:

1、微信打开H5页面,样式没有加载出来,采用微信网页“刷新”页面又可以正常显示。返回后重新进入页又不行了。

2、用浏览器打开,F12查看源码又有样式link相关得html代码,但是网络请求没有这个css文件,也没有报错。


经过各种排查问题,各种猜测,尝试,无果。最后,网上找资料有一个网友得的回复提醒了我,他说:看是不是有代码把css阻塞了?

我觉得有道理,索性把link引用放在页面最前面,果然成功了!!!!!

后来我对比了一下这两个引用得位置得区别。

把link放在head中得任意位置都是可以,唯独放在body不行。

我下来查了查资料,HTML5中link就不能放在body中,这点千万要记住!不然会出现,以上等各种问题。

参考:

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link

注意事项:

from clipboard


ps:看来基础知识太重要了。

小编蓝狐