CSS3 Pie在IE8中不起作用

Question

更新 这似乎是backgroundIE8中的一个问题.CSS3 PIE似乎正常工作,但是当我有背景时它没有显示.如果我完全删除背景css,它会再次显示.IE:

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

现在的问题变成了我如何才能CSS3 PIE正确的IE 8的工作有一个背景是什么？

这是一个带有上述代码的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在上面的评论中提到的那样,问题是CSS3 PIE网站上描述的z-index问题:

消失的背景/边框/阴影(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索引堆叠方面产生潜在的不良副作用.PIE很容易强迫一个人或另一个人,但是:

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

因此,PIE既不做,也应由作者在必要时实施任何一种解决方法.在大多数情况下,只需添加位置:相对于目标元素就可以了.

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