官網(wǎng)
名稱：PIE.js
此JS可使IE6,7,8支持CSS3的部分渲染
例如：
border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image
使用辦法：
此API使用非常簡單，只需要在頁面頭部引用
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <!--[if lt IE 9]>
- <script type="text/javascript" src="path/to/PIE.js"> </script>
- <![endif]-->
以下是jQuery的調(diào)用辦法，把你需要渲染的樣式名寫上即可
JavaScript Code復(fù)制內(nèi)容到剪貼板
- $(function() {
- $('.rounded').each(function() {
- PIE.attach(this);
- });
- });
同樣，如果要?jiǎng)h除某個(gè)樣式的CSS3效果
截圖：
演示：（請使用IE6,7,8查看）
http://www.html5china.com/html5demo/Pie/
代碼：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>讓IE678支持CSS3渲染 - HTML5中文網(wǎng)</title>
- <script type="text/javascript" src="PIE.js"></script>
- <style>
- .tabBox .tabs {
- margin: 0;
- padding: 0 10px;
- overflow: hidden;
- margin-bottom: -1px;
- height: 2.25em;
- }
- .tabBox .tabs li {
- float: left;
- list-style: none;
- margin: 0;
- padding: .25em .25em 0;
- height: 2em;
- overflow: hidden;
- position: relative;
- z-index: 1;
- border-bottom: 1px solid #FFF;
- }
- .tabBox .tabs li.selected {
- z-index: 3;
- }
- .tabBox .tabs a {
- float: left;
- height: 2em;
- line-height: 2em;
- -webkit-border-radius: 8px 8px 0 0;
- -moz-border-radius: 8px 8px 0 0;
- border-radius: 8px 8px 0 0;
- background: #EEE;
- border: 1px solid #CCC;
- border-bottom: 0;
- padding: 0 10px;
- color: #000;
- text-decoration: none;
- behavior: url(PIE.htc);
- }
- .tabBox .tabs .selected a {
- background: #FFF;
- -webkit-box-shadow: #CCC 0 0 .25em;
- -moz-box-shadow: #CCC 0 0 .25em;
- box-shadow: #CCC 0 0 .25em;
- }
- .tabBox .tabs a:hover {
- background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
- background: -moz-linear-gradient(#EEF, #FFF 70%);
- background: linear-gradient(#EEF, #FFF 70%);
- -pie-background: linear-gradient(#EEF, #FFF 70%);
- }
- .tabBox .content {
- clear: left;
- position: relative;
- z-index: 2;
- padding: 2em 1em;
- border: 1px solid #CCC;
- background: #FFF;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- -webkit-box-shadow: #CCC 0 0 .25em;
- -moz-box-shadow: #CCC 0 0 .25em;
- box-shadow: #CCC 0 0 .25em;
- behavior: url(PIE.htc);
- }
- </style>
- </head>
- <body>
- <div class="tabBox">
- <ul class="tabs">
- <li class="selected"><a href="#">選項(xiàng)一</a></li>
- <li><a href="#">選項(xiàng)二</a></li>
- <li><a href="#">選項(xiàng)三</a></li>
- </ul>
- <div class="content">
- <p><a href="http://www.html5china.com">請使用IE6,7,8瀏覽</a></p>
- </div>
- </div>
- </body>
- </html>
