发表于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
注意事项:
ps:看来基础知识太重要了。