VSCode中格式化前端页面后导致html元素的style属性格式错误,页面样式失效

分类:计算机 | 前端 | 综合 1137
更新:2021-11-13 12:28:46
编辑

最近在做一个网址导航的模块,发现给导航链接设置的网站logo显示不出来了,在浏览器中用F12看了下logo的css样式,发现样式失效了,如下所示:

其中设置背景图片属性的前面和后面都多出了一个换行符"\n",这是怎么回事呢?于是在VSCode中看了一下源码,发现链接的style属性变成了这样:

<a
href="https://www.csdn.net/"
class="icon-site"
target="_blank"
style="
  background-image: url(https://g.csdnimg.cn/static/logo/favicon32.ico);
"
>
<span>CSDN</span>
</a>

这才知道原来是在VSCode中使用“Format Document”功能的时候,将style属性值的两个引号都进行了换行,进而导致了css样式的失效。

去掉换行以后就好了,代码如下:

<a
href="https://www.csdn.net/"
class="icon-site"
target="_blank"
style="background-image: url(https://g.csdnimg.cn/static/logo/favicon32.ico);"
>
<span>CSDN</span>
</a>