internet-explorer-8 - CSS3 Pie Not Working in IE8

Question

UPDATE This would appear to be a issue with background in IE8. CSS3 PIE appears to work correctly however when I have a background it doesn't show. If I remove the background css completely it shows again. IE:

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

Now my question turns into how do I get CSS3 PIE to work properly in IE 8 with a background?

Here is a jsFiddle with the above code.

---

Original Question

---

I am attempting to replicate a look in IE 8 using CSS3 Pie JS Edition. Here is what I want it to look like:

Here is the way it looks in IE 8 with CSS3 PIE:

As you can see when I implement CSS3 PIE the box disappears! I have not used CSS3 PIE before and do not know what is wrong. Here is the code I am using:

NOTE: I am using the JS edition (I am using a hosted CMS and do not have server side access thus cannot use the .htc file.)

Here is my code to call 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]-->

Here is the HTML and 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 问题，如 CSS3 PIE 网站上所述：

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

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

但是，当目标元素为 position:static 时，这并不好用，因为静态元素不参与 z-index 堆叠。让我们的 position:absolute css3 元素落后的唯一方法是给它 z-index:-1。不幸的是，这有一个不好的副作用：css3 元素不仅会落后于目标元素，它还会落后于任何本身是 position:static 的祖先元素的背景。这会导致 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 之外强制 position:relative 会使 IE 与其他浏览器不同步，从而导致混乱的不一致。

因此，PIE 两者都没有，并且由作者在必要时实施任一变通方法。在大多数情况下，只需添加 position:relative 到目标元素就可以了。

该解决方案可能会导致其他问题。我最终问自己，创建圆角是否值得麻烦？对于某些站点，是的，对于其他站点，这是您的选择。

Answer 2

取而代之的是behavior: url(PIE.htc);，您可以设置behavior: url(PIE.php);.