CSS3 Pie在IE8中不起作用

Question

更新 这似乎是IE8中background的问题。 CSS3 PIE似乎正常工作，但是当我有背景时它没有显示。如果我完全删除背景css，它会再次显示。 IE：

html, body{ 
  background: /*CSS */; /* Remove this property */
}

现在我的问题变成了如何让CSS3 PIE在IE 8 中使用背景正常工作？

Here is a jsFiddle上面的代码。

---

原始问题

---

我试图使用CSS3 Pie JS Edition在IE 8中复制一下。这就是我想要的样子：

以下是使用CSS3 PIE在IE 8中的显示方式：

正如您所看到的，当我实现CSS3 PIE时，框消失了！我之前没有使用过CSS3 PIE，也不知道出了什么问题。这是我正在使用的代码：

注意 ：我使用的是JS版（我使用的是托管的CMS，没有服务器端访问权限，因此无法使用.htc档案。）

这是我调用CSS3 Pie的代码：

<!--[if lt IE 10]>
  <script type="text/javascript" src="/js/PIE.js"></script>
  <script type="text/javascript">
    $(function() {
       if (window.PIE) {
         $('.surround').each(function() {
           PIE.attach(this);
          });
         }
       });
  </script>
<![endif]-->

这是HTML和CSS：

<div class="row surround">
<div class="twelvecol">
 <p>Lorem Ipsum</p>
</div>
</div>

.surround
 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; 
  padding: 25px;
  background:#f5f2f7;
  border: 5px solid #b30005;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.4);
  -o-box-shadow: 0 5px 10px rgba(0,0,0,0.4);
  box-shadow: 0 5px 10px rgba(0,0,0,0.4);
  -webkit-border-radius:25px;
  -moz-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius:25px;
  border-top: solid #b30005 25px;
 }

Answer 1

正如@Spudley在上面的评论中提到的那样，问题是z-index问题为described on the CSS3 PIE Website：

  

消失的背景/边框/阴影（z-index问题）

     

首先，关于PIE如何渲染CSS3装饰的一些背景知识：创建了一个包含所有VML对象的单个元素。此容器元素作为前一个兄弟插入到目标元素，并且绝对位于相同的坐标处。如果目标元素是position：absolute或position：relative，那么css3-container元素被赋予与目标元素相同的z-index，并且由于它是DOM树中的前一个兄弟，它被显示在后面，没有可能任何其他元素潜入其间。

     

但是，当target元素为position：static时，这不能很好地工作，因为静态元素不参与z-index堆叠。使我们的位置唯一的方法：绝对css3元素落后于它给它z-index：-1。不幸的是，这有一个不好的副作用：css3元素不仅会落后于目标元素，它还会落后于任何祖先元素的背景，这些元素本身就是位置：静态。这导致PIE正确创建VML渲染但在父元素背景后消失的情况。

     

我知道解决这个问题的唯一方法是：

     make the target element position:relative, or
     make the ancestor element position:relative and give it a z-index.

     

这两种解决方法都可能在子元素定位和z-index堆叠方面产生潜在的不良副作用。 PIE很容易强迫一个人或另一个人，但是：

     

根据具体情况，一个或另一个可能更合适，因此CSS作者需要能够控制选择哪一个。       强制位置：CSS之外的相对位置会使IE与其他浏览器不同步，导致混淆不一致。

     因此，PIE不会这样做，并且由作者在必要时实施任何一种解决方法。在大多数情况下，只需添加位置：相对于目标元素就可以了。

解决方案可能会导致其他问题。我最后问自己创造圆角是否值得麻烦？对于某些网站，是的，对于其他网站来说，它是您的选择。

Answer 2

您可以设置behavior: url(PIE.htc);。

，而不是behavior: url(PIE.php);