让ie6,7,8支持css3的一些属性

PIE使Internet Explorer 6-9能够呈现几个最有用的CSS3装饰功能。

关于PIE

CSS 3级带来了一些令人难以置信的强大的样式功能。圆角，柔和阴影，渐变填充等等。这些都是我们的设计师朋友喜欢使用的元素，因为它们吸引人的地方，但是实现起来非常困难和耗时，涉及复杂的精灵图像，额外的非语义标记，大型JavaScript库以及其他可爱的黑客。

CSS3承诺废除所有这一切！但是众所周知，由于Internet Explorer对这些功能缺乏支持，我们必须耐心，不要使用它们，并且在可预见的将来也要使用相同的旧技术。

或者我们必须？

PIE代表Progressive Internet Explorer。这是一个IE附加的行为，当应用到一个元素，允许IE识别并显示一些CSS3属性。考虑一下，如果你愿意，下面的CSS：

#myElement {
    background: #EEE;
    padding: 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

这导致在今天的任何一个现代浏览器中有一个很好的圆角的盒子，当然除了IE 6,7或者8，它们都显示一个方形盒子。但是，将下面的单个规则添加到该CSS：

#myElement {
    ...
    behavior: url(PIE.htc);
}

现在在IE中出现完全相同的圆角！这里的所有都是它的。不，我真的是这个意思。

PIE目前为IE 6至8增加了对以下CSS3功能的全部或部分支持：

• 边界半径
• 箱阴影
• 边框，图像
• 多个背景图像
• 线性渐变作为背景图像

另外，PIE在IE 9中增加了对边界图像和线性渐变的支持，IE 9本身就支持其他功能。

其他功能正在积极开发之中。

步骤：

第1步：下载它

下载PIE发行版并将其解压缩到某个位置。

第2步：上传

将解压缩包的内容上传到Web服务器上的目录。只要你知道它在哪里，究竟在哪里并不重要。

第3步：写一些CSS3

假设你已经有了一个HTML文档，假设你想要给它的一个圆角。为该元素创建一个CSS规则，并给它一个边框半径风格，如下所示：

#myAwesomeElement {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

（注意-webkit和-moz-前缀的版本;这些对于使圆角在基于WebKit和Mozilla的浏览器中起作用是必要的。）

步骤4：应用PIE

在相同的CSS规则中，添加下面的样式行：

behavior: url(path/to/pie_files/PIE.htc);

当然，您需要调整路径以匹配您在步骤2中上传PIE.htc的位置。注意：此路径与正在查看的HTML文件相关，而不是从中调用的CSS文件。

第5步：在IE浏览器中查看

如果一切顺利，在这一点上，你应该能够在IE浏览器加载页面，并看到像其他浏览器呈现的CSS3圆角。现在你可以玩一些其他支持的CSS3装饰像盒子阴影

支持的属性值介绍：

边界半径

PIE完全支持IE6-8 的CSS3 Backgrounds and Borders模块规范中定义的border-radius属性语法。IE 9和支持本地边界半径，所以PIE什么都不做。

border-radius：[<length> | <percentage>] {1,4} [/ [<length> | <percentage>] {1,4}]？

只支持简写版本; longhand左上半径等属性不是。简写语法虽然支持每个角的不同半径，但是，会和实际情况不符：

border-radius: 5px 10px 15px 20px; （左上角，右上角，右下角，左下角）。

圆角应用于元素的背景区域（包括纯色背景图像，背景图像和背景渐变），元素的边框和指定的阴影框。

标准的border-radius属性名称以及自定义的prefixed -pie-border-radius属性名称都被识别; 如果两者都存在，则前缀值将优先。建议只在可能的情况下使用标准的前置属性。

箱阴影

PIE支持 IE 6-8中CSS3 Backgrounds＆Borders模块中定义的box-shadow属性语法。IE 9和支持本机的阴影，所以PIE什么都不做。

box-shadow：none | <shadow> [，<shadow>] *
    哪里<阴影> =插入？&& [<offset-x> <offset-y> <blur-radius>？<传播半径>？&& <color>？]

标准的box-shadow属性名称以及自定义的前缀-pie-box-shadow属性名称都被识别; 如果两者都存在，则前缀值将优先。建议尽可能使用非前缀属性。

与边框半径一起使用时，阴影的形状与圆角边框的形状相匹配。

与其他浏览器不同，PIE渲染的阴影形状 在元素背景背后的区域是不透明的。这意味着如果你的元素具有透明或半透明的背景，那么不透明的阴影将显示出来。为了避免这种情况，你必须给元素一个非透明的背景，或者删除box-shadow。

PIE目前不支持“插入”关键字，但支持计划在未来的版本（见问题＃3。

如果将rgba颜色与模糊半径一起指定，则颜色将在PIE 1.0中呈现完全不透明度。这是从PIE 2.0测试版中修复的。

其他浏览器的注意事项：

请参阅https://developer.mozilla.org/En/CSS/-moz-box-shadow底部的兼容性图表

边框，图像

PIE增加了对IE 6-9的边界图像属性的支持。此属性允许您指定一个图像，该图像被分成九个方格，然后绘制为目标元素的角点，边和中心。

目前PIE的实施有一些限制，包括：

1. 它只支持IE 6-8中的“伸展”方案。（IE 9完全支持其他方案（“重复”和“回合”）。）
2. 它不支持 在背景与边框模块规范中描述的开始参数，尽管其他浏览器似乎也不支持。
3. 它需要填充关键字来填充中心区域。根据规范这是正确的行为，但其他浏览器不需要它，有些甚至如果“填充”存在，就会失败，所以有点儿棘手的使其在浏览器中一致工作。
4. 在PIE 1.0中，极少数情况下舍入误差导致图像片段之间1px的间隙。但是，我也看到这些差距也发生在其他浏览器中。这似乎是从PIE 2.0测试版中修复的。

CSS3背景（-pie背景）

PIE支持CSS3多背景图像，线性渐变作为背景图像，以及一些新的CSS3背景方面，如背景原点和剪辑。不幸的是，为了访问这些后CSS2值，我们必须把它们放在标准的“后台”属性以外的属性，因为IE将尝试在内部解析值，不允许我们访问原始值字符串。因此我们使用一个自定义-pie-background属性来保存这些值。

（请注意，IE9和原生支持多个背景图像，因此PIE只能在IE 6-8中占据上风，当在-pie背景中存在渐变时，它也会在IE 9中接管 - 参见下面的渐变部分。）

只识别单馅饼背景速记值; longhand值（例如background-origin）被忽略。

为了向后兼容不支持CSS3背景的浏览器，请确保包含适当的回退。例如：

#myElement {
    background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
    background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
    background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: url(bg-image.png) no-repeat, -ms-linear-gradient(#CCC, #EEE); /*IE10 preview*/
    background: url(bg-image.png) no-repeat, -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
    background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
}

虽然PIE解析器将允许它们，但在IE 6-8中渲染时，背景速记的以下方面将被忽略：

• 背景附件（即使指定了“固定”或“本地”，也将始终使用'滚动'）
• 背景大小（将始终使用图像的固有尺寸） - 从PIE 2.0测试版开始支持
• “space”或“round”的背景重复值（支持其他重复值）
• background-origin（将始终使用“padding-box”） - 从PIE 2.0 beta开始支持
• 背景剪辑（将始终使用“边框”） - 这是从PIE 2.0测试版支持
• 背景位置值超过2部分

这些项目的支持将尽可能在未来版本中添加。

请注意，使用指定的PNG背景图像-pie-background将在IE6中呈现正确的Alpha通道透明度。有关更多信息，请参阅下面有关PNG alpha透明度的部分 。

其他浏览器的注意事项：

请参阅https://developer.mozilla.org/en/CSS/Multiple_backgrounds

渐变

linear-gradient对于IE 6-9，PIE当前支持在-pie-background属性中使用的图像值。不支持在-pie-background之外的任何上下文中使用线性渐变。

支持的语法与CSS3图像值模块匹配 - PIE 1.0使用旧的 2011工作草案语法，而PIE 2.0 beta使用最终语法。如果你从PIE 1.0升级到2.0测试版，那么你必须确保你更新你的CSS到最后的语法 - 例如使用“向右”，而不是“左”，并调整任何角度是从垂直顺时针。

线性渐变（[<bg-position> || <angle>，] <color-stop>，<color-stop> [，<color-stop>] *）;

IE 6-8中的PIE线性梯度支持有一些限制（所有这些在IE 9中都能正常工作）：

• 在PIE 1.0中，即使指定了rgba颜色值，在IE 6-8中，所有的颜色停留点都会呈现完全不透明的状态。从PIE 2.0 beta开始，rgba alpha在IE 6-8中正常渲染，但是只有当梯度有两个颜色停止。（见 问题＃7）
• 由于VML渐变渲染的限制，当前不支持包含位于元素边界区域之外的颜色停止的渐变。
• IE 6-8中的渐变不支持background-size / origin / repeat / position参数，所以你不能做 渐变模式效果。

此时不支持径向梯度; 这个功能是为将来的版本而设计的（参见问题＃2），但是由于VML的径向渐变行为，在IE6-8中可能无法实现。

其他浏览器的注意事项：

其他一些浏览器需要线性梯度名称上的供应商前缀，例如Firefox的-moz-linear-gradient或WebKit浏览器的-webkit-linear-gradient。

添加PIE所需的-pie-background属性，您将需要一组类似于以下的样式来在浏览器中获得一致的线性渐变背景：

#myElement {
    background: #CCC; /*fallback for non-CSS3 browsers*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
    background: -webkit-linear-gradient(top, #CCC, #EEE); /*newer webkit*/
    background: -moz-linear-gradient(top, #CCC, #EEE); /*old gecko*/
    background: -o-linear-gradient(top, #CCC, #EEE); /*opera 11.10+*/
    background: linear-gradient(to bottom, #CCC, #EEE); /*firefox 16+, chrome 26+, IE10+, opera 12.10+, future browsers*/
    -pie-background: linear-gradient(to bottom, #CCC, #EEE); /*ie 6-9 via PIE*/
    behavior: url(PIE.htc);
}

有关跨浏览器的线性渐变的当前状态的更多详细信息，请参阅John Allsopp和MDN线性渐变文档中的这篇 文章。

RGBA颜色值

PIE在任何允许的地方分析RGBA颜色值。但是，它只能在少数情况下成功渲染其不透明度值。在所有其他上下文中，它们将以正确的RGB颜色呈现，但是完全不透明。这里是不透明度将被正确渲染的支持上下文：

• -pie-background属性中指定的纯色背景色。
• 盒子阴影的颜色值。在PIE 1.0中，只有在阴影没有模糊的情况下才能正常工作，但在PIE 2.0测试版中，模糊也可以使用。
• 颜色以线性渐变停止。在PIE 1.0中，这仅适用于IE 9（在IE 6-8中rgba颜色将呈现完全不透明）。在PIE 2.0测试版中，它也适用于IE 6-8，但前提是梯度只有两个颜色停止。

PIE自定义属性

-pie-load-path（仅适用于PIE 2.0 beta）

从PIE 2.0测试版开始，PIE.htc行为文件是一个非常轻量级的加载器，加载到包含当前IE版本所需逻辑的第二个JS文件中。默认情况下，它从与PIE.htc行为文件本身相同的服务器路径加载该辅助JS文件。

如果你想覆盖JS文件的加载位置，你可以在CSS中为<html>元素添加custom -pie-load-path属性：

html {
    -pie-load-path: "http://any.server/path/to/pie-js-files/";
}

这可以是任何服务器上的任何路径，并且不受HTC文件的相同域限制。例如，如果您希望托管CDN上的JS文件以充分利用地理定位缓存来提高性能，这将非常有用 。

-pie手表老祖

PIE会自动侦听应用了该行为的元素上的任何属性或样式属性更改。这意味着如果您有脚本修改任何公认的CSS3属性，这些更改将自动被拾取，并且渲染将被更新以匹配。例如：

/* JS: */
myElement.onclick = function() {
    this.style.borderRadius = '20px';
};

/* CSS: */
#myElement {
    behavior: url(PIE.htc);
    border-radius: 10px;
}

假设myElement具有附加的PIE.htc行为，上面的代码将按预期工作，无需脚本或CSS的作者额外努力。这种无缝性是PIE易于使用的重要组成部分。

但是脚本中最常见的做法是，脚本应该只添加/移除元素的类名，而不是直接使用element.style.foo来设置样式，而是在CSS中保留与这些类名对应的实际样式。所以重新做上面的例子：

/* JS: */
myElement.onclick = function() {
    this.className += ' poked';
}

/* CSS: */
#myElement {
    behavior: url(PIE.htc);
    border-radius: 10px;
}
#myElement.poked {
    border-radius: 20px;
}

同样，由于在应用行为的元素上正在改变className，所以PIE将自动得到改变的通知，并且更新边界半径渲染以匹配新的值。

但是，如果className不是在元素本身，而是在其祖先之一上改变的呢？

/* JS: */
myElement.onclick = function() {
    this.parentNode.className += ' poked';
}

/* CSS: */
#myElement {
    behavior: url(PIE.htc);
    border-radius: 10px;
}
.poked #myElement {
    border-radius: 20px;
}

这是一个非常普通的模式，可以提供很大的灵活性。但是，在这种情况下，PIE将不会自动通知className更改。为了得到通知，它还必须添加一个监听器到祖先元素。我们可以通过自动将propertychange监听器添加到每个PIE目标元素的所有祖先来暴力破解，但是这会对性能和内存使用造成不利影响。相反，我们引入了一个自定义的CSS属性，允许作者告诉PIE应该监视某些祖先：

/* JS: */
myElement.onclick = function() {
    this.parentNode.className += ' poked';
}

/* CSS: */
#myElement {
    behavior: url(PIE.htc);
    border-radius: 10px;
    -pie-watch-ancestors: 1;
}
.poked #myElement {
    border-radius: 20px;
}

这告诉PIE，它应该观察元素上一级的祖先变化。它会将propertychange监听器附加到元素的父级，因此会在父级的className被更改时得到通知，并正确更新渲染。

PNG alpha透明度和-pie-png-fix

PIE使用VML进行渲染的一个很好的副作用是，当它们由PIE引擎渲染时，它会导致具有Alpha通道透明度的PNG图像在IE6中正确显示。这包括：

• 使用-pie-background属性指定的背景图像
• 使用标准background-image样式指定的背景图像，当与触发重新渲染背景（border-radius，border-image）的其他CSS3属性结合使用时，
• 应用边界半径的<img>元素

有时，您可能想要获得固定PNG透明度的好处，对不符合上述标准的元素。在这种情况下，您可以添加自定义属性-pie-png-fix: true;来强制重新渲染背景图像或<img>。（PIE.htc行为也必须附加到元素。）

延迟初始化（-pie-lazy-init）

虽然PIE已经针对速度进行了优化，但是其应用的每个元素的渲染性能仍然很小。当您的页面上有数十或数百个元素应用CSS3样式时，这可能会导致明显的渲染延迟。

当你在一个页面上有很多元素的时候，最初的浏览器视窗中只有少量的元素是可见的，因为查看剩下的元素需要滚动。PIE允许对这种情况进行可选的优化：如果将自定义-pie-lazy-init:true;属性应用于元素，PIE将延迟CSS3渲染的初始化，直到它们滚动到视口中。这可以保持初始页面加载速度，而不会严重限制您可以呈现的元素数量。

布局轮询（-pie-poll）

一般而言，PIE能够很好地检测所连接元素的大小和位置的变化，并自动调整其匹配的渲染。它通过监听IE特有的做这 onmove和onresize事件为每个目标元素。在大多数情况下，这可以无缝工作。但是，在极少数情况下，IE不会在应该的时候触发这些事件，并且PIE不同步。

为了帮助用户解决这些问题，PIE有第二种跟踪大小和位置变化的方法：轮询。当为一个元素启用轮询时，PIE会每秒手动查询该元素的布局几次，如果布局已经改变，那么它将调整渲染。

对于IE 8和IE 9中的所有元素，默认启用轮询（因为那些版本对于未触发事件尤其不利），并且在IE 6和7中禁用轮询。用户可以覆盖这些默认值，以通过设置强制轮询打开或关闭各个元素一个自定义的CSS属性：只需指定 -pie-poll:true;强制轮询一个元素，或者-pie-poll:false;禁用它。

悬停跟踪（-pie-track-hover）

默认情况下，PIE会自动侦听鼠标悬停/弹出事件，并:hover 在浏览器支持的情况下应用任何匹配样式。此外，它还会pie_hover为元素添加一个特殊的类，以便在不支持IE的版本中应用悬停样式。

如果你想禁用这个，你可以通过设置-pie-track-hover:false; 元素的自定义CSS样式来实现。这可能是有用的，如果您发现悬停时页面上的缓慢，您不需要悬停样式。

主动跟踪（-pie-track-active）

默认情况下，PIE自动侦听mousedown / up事件，并:active 在浏览器支持的情况下应用任何匹配样式。另外，它pie_active为元素添加了一个特殊的类，你可以使用它来在不支持IE的版本中应用活动样式。

如果你想禁用这个，你可以通过设置-pie-track-active:false; 元素的自定义CSS样式来实现。这在一些情况下很有用，例如，在pie7中加入pie_active类会产生不需要的副作用，例如打破IE7中滚动条的行为。

官网下载：http://fetchak.com/ie-css3/