您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)border-radius IE8兼容處理的示例分析,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
根據(jù)canisue(http://caniuse.com/#search=border-radius),border-radius兼容性如下圖所示:
測(cè)試代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #header { width: 400px; height: 400px; margin: 10px; border-radius: 10px; border: 1px solid red; } </style> </head> <body> <div id="header"> </div> </body> </html>
IE8瀏覽器效果:
border-radius在IE8瀏覽器兼容方案:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #header { width: 400px; height: 400px; margin: 10px; border-radius: 10px; border: 1px solid red; /*關(guān)鍵屬性設(shè)置 需要把路徑設(shè)置好*/ behavior: url(PIE.htc); } </style> </head> <body> <div id="header"> </div> </body> </html>
IE8瀏覽器下效果:
PIE.HTC下載地址:http://css3pie.com/
PIE可以處理CSS3的一些屬性,如:
IE8:兼容性主要是:
(1)不支持css3屬性,使用PIE.js實(shí)現(xiàn)CSS3效果。
(2)media query
關(guān)于“border-radius IE8兼容處理的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。