解決IE8下不支援border-radius的問題
阿新 • • 發佈:2018-12-11
最近做了一個專案,是讓相容IE8瀏覽器的,遇到了IE8不支援border-radius和box-shadow的問題,在網上找了解決方案,主要是藉助於PIE.htc,具體的過程,發一個寫的比較好的文章(看連線文章之後,如果您還沒有解決問題,建議回過頭來看看我下面的注意事項,否則可能有坑哦,絕對是善意的提醒,本人就是從坑中爬了好久才爬出來的)
相比其他文章,這個是比較詳細的了,但需要注意一個問題:
注意:PIE.htc路徑是相對於html檔案的,而不是當前css檔案哦(通俗點說就是,看從html怎麼能找到PIE.htc檔案,如果PIE.htc和html同級,就直接 :behavior: url(PIE.htc),如果PIE.htc在html的子輩級,比如在css資料夾下,就是behavior: url(css/PIE.htc))
看個例子:
如果PIE.htc和index.html在同級目錄下,index.css是在css資料夾下,如圖所示:
那index.css程式碼如下:
.wrap{
width:100px;
height:100px;
background-color: #5bc0de;
border-radius: 50%;
behavior: url(PIE.htc);
}
切記:不要寫成
.wrap{
behavior: url(../PIE.htc);
}
為了更好的理解,再看個例子:
html,PIE.htc,css的存放路徑如下圖所示:
index.css程式碼如下:
.wrap{
width:100px;
height:100px;
background-color: #5bc0de;
border-radius: 50%;
behavior: url(css/PIE.htc);
}
那,如果您實在不理解,簡單點的辦法,把PIE.htc放在與html同級目錄下,那css中引入htc的寫法就是:behavior: url(PIE.htc);
ok,完畢