IE8圆角问题
IE8不支持border-radius，無法實現圓角的效果。
有個PIE插件，似乎能夠達到讓IE8支持圓角效果的。
官網似乎是?http://css3pie.com/，但是官網上沒效果！別說是IE8了，9、10、11都沒有圓角啊。火狐和google瀏覽器也都沒有，奇怪了！
繼續查找資料：
URL1:?https://www.zhangxinxu.com/wordpress/2010/07/pie%E4%BD%BFie%E6%94%AF%E6%8C%81css3%E5%9C%86%E8%A7%92%E7%9B%92%E9%98%B4%E5%BD%B1%E4%B8%8E%E6%B8%90%E5%8F%98%E6%B8%B2%E6%9F%93/
這個是比較全的介紹了，后面還有一些注意事項。
URL2:https://www.zhangxinxu.com/study/201007/pie-ie-css3-demo.html
這個網頁上的和css3pie主頁的一樣，但是確實是有圓角效果了。
URL3:https://download.csdn.net/download/xiaoyaoyixian/7563175
這是csdn上的demo文件，也有效果的。
另外 最早找到的資料
URL4:http://www.ijquery.cn/?p=675
里面說PIE.attach(this);沒必要，后面測試看看。
項目的需求是
在IE8下變成了
修改CSDN下載的文件中的例子，只留下需要的部分
<!DOCTYPE html> <!--如果沒有這一句，最底下的三角形會顯示不出來--> <html> <head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><title>CSS3 PIE 圓角演示</title><style type='text/css'>body {background-color: blue;}.radiusContainer {height: 100px;width: 100px;background: #999;margin: 10px;}.radiusContainer img {height: 100px;width: 100px;}.pieRadius1 {behavior: url(PIE.htc);position: relative; /*如果沒有這個屬性，顯示不出來*/border-radius: 10px;}.pieRadius2 {behavior: url(PIE.htc);position: relative; /*如果沒有這個屬性，顯示不出來*/border-radius: 1em;}.pieRadius3 {behavior: url(PIE.htc);position: relative; /*如果沒有這個屬性，顯示不出來*/border-radius: 50%;}</style><!--[if lt IE 9]><script type="text/javascript" src="PIE_IE678.js"></script><![endif]--><!--[if IE 9]><script type="text/javascript" src="PIE_IE9.js"></script><![endif]--> </head><body><div id="page"><div id="tests"><span class="radiusContainer pieRadius1"><img src="profile.png" class="pieRadius1"/></span><span class="radiusContainer pieRadius2"><img src="profile.png" class="pieRadius2"/></span><span class="radiusContainer pieRadius3"><img src="profile.png" class="pieRadius3"/></span></div></div></body> </html>實現效果：
最后把相關代碼拿到項目頁面中，實現UI設計的效果。
/*登錄用戶圖片圈圈*/ #imgProfile {margin: 10px;position: relative;border-radius: 50%;behavior: url(PIE/PIE.htc);/*這個路徑是相對于html頁面的，不是css文件的*/ } /*消息right圈圈*/ #amounts {width: 30px;height: 16px;position: absolute;top: 51px;left: 75px;text-align: center;line-height: 16px;color: #8695b2;background-color: #FF548C;color: white;border-radius: 30px;behavior: url(PIE/PIE.htc);/*這個路徑是相對于html頁面的，不是css文件的*/ }behavior的url必須是相對于html頁面的路徑，就因為這個沒弄對，我們的前端搞了半天沒弄出來。
URL1后面的注意點中有提到這個路徑，URL4中的例子的CSS不能用。
總結
- 上一篇： 文储研习社第11期 | DAO的前世今生
- 下一篇： 一支笔的测试点_7.30关于一支笔的测试