1. 程式人生 > >解決IE8下不支援border-radius的問題

解決IE8下不支援border-radius的問題

最近做了一個專案,是讓相容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,完畢