css3pie_在IE中结合使用CSS3和PIE Slice

css3pie

当Microsoft宣布对Internet Explorer 9CSS3支持时，我们所有人都感到高兴。也许现在，我们将能够使用几十年来在其他浏览器中支持的时髦效果（大约两年）。 不幸的是，IE9仍然不可用，并且更有可能在明年出现。 此外，它不会在XP上可用，因此大多数Windows用户充其量只能使用IE8，在很多方面都没有关系。 IE将忽略它无法理解CSS3选择器和属性，但是，如果您小心的话，您的网站仍然可以使用。 很好，直到您的客户或老板要求知道为什么他们的浏览器缺少圆角。 您可能会提出合理且合乎逻辑的论据来说明浏览器的兼容性和渐进增强功能，但它们并不在乎。 他们为圆角花了很多钱，现在就想要它们。在开始切片背景图像之前，您可能会想知道另一个选择： CSS3 PIE （渐进式Internet Explorer）。 这是Jason Johnston的新项目，它提供了与Dean Edwards的IE7垫片相似的解决方案，它使用JavaScript将以下CSS3功能添加到IE6、7和8：

• border-radius
• box-shadow
• border-image
• 多个背景图片
• RGBA颜色值，以及
• 渐变

除少数例外，无需更改现有CSS3属性。 border-radius: 5px只会在Internet Explorer中应用。 它还可以监视JavaScript行为，因此您可以使用以下代码：

var myelement = document.getElementById("myelement");myelement.style.borderRadius = "20px";

CSS3 PIE如何工作？

下载PIE.htc文件并将其放在CSS文件夹中。 请注意，它需要使用MIME类型的text/x-component （在“ 已知问题”页面末尾提供了进一步的说明）进行提供。然后，您需要为需要CSS3效果的每个元素添加行为属性，例如例：

#myelement {    behavior: url(PIE.htc);    border-radius: 10px;}

IE会加载PIE脚本，并使用Microsoft的专有过滤器或VML应用效果以达到相同的结果。

注意：什么是IE过滤器？

过滤器和过渡是1997年在IE4中引入的，但大多数更好的选择出现在2000年的IE5.5中。过滤器允许的效果仅在CSS3中变得很常见。 您会看到：IE并非全都不错，Microsoft可以发挥创新作用。不幸的是，过滤器是一种hack，仅在某些情况下表现良好，并且使用了可怕的代码，例如：

filter:progid:DXImageTransform.Microsoft.Shadow(Color=#000000,Direction=45);

过滤器永远不可能成为W3C标准，很少有开发人员使用它们。

您应该注意，CSS3 PIE不可能在每种情况下都是可行的解决方案，并且作为beta产品，可能会出现问题。 但是，对于希望采用CSS3而又不忽略IE用户的Web开发人员来说，这是一个不错的选择。您是否尝试过CSS3 PIE ？ 它有用吗？还是您希望将效果隐藏在IE8和更早版本中？

翻译自: https://www.sitepoint.com/ie-css3-pie/

css3pie