最近在編寫網頁時,發現一個很奇怪的問題:當我給css文件加個v參數時,網頁的樣式會出現問題。例如,原本的代碼如下:
.box {
background-color: red;
width: 200px;
height: 200px;
}
然后我加上了一個v參數:
.box?v {
background-color: blue;
}
結果網頁的盒子顏色變成了藍色,其他的樣式也都錯了。
我想了很久,后來聽別人說是瀏覽器緩存的問題,我感到十分懊惱。
因為在網頁中使用了外部的CSS文件,瀏覽器會緩存這個文件,提高加載速度。當文件內容發生變化時,瀏覽器會重新下載。
但是當你給css文件加上參數時,瀏覽器可能會認為是不同的文件,而不是同一文件內容的更改。因此瀏覽器就不會去重新下載,繼續使用緩存的文件,于是就出現了樣式錯亂的問題。
遇到這種問題,我們可以嘗試清空瀏覽器緩存或者在文件名后面加上一個隨機數來避免這個問題。
例:
<link rel="stylesheet" type="text/css" href="style.css?v=1.1">
這樣每次修改后只需要修改?v中的數字即可。
總結:給CSS文件加v參數容易出現問題,我們可以清空瀏覽器緩存或者在文件名后面加上一個隨機數來避免這個問題。