CSS3 Pie 在 IE8 中不起作用答案

【问题标题】：CSS3 Pie Not Working in IE8CSS3 Pie 在 IE8 中不起作用
【发布时间】：2012-09-29 07:12:51
【问题描述】：

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

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

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

Here is a jsFiddle 上面的代码。

原始问题

我正在尝试使用 CSS3 Pie JS 版在 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;
 }

【问题讨论】：

题外话技术点：你应该把CSS样式的无前缀版本放在最后，在前缀版本之后。
@Spudley - 感谢您的提示。
为什么IE8截图在圆角应该在的方框中有空隙？那看起来不对。如果 css3pie 不起作用，我希望它会显示一个实心框，就像您根本没有圆角一样。
@Spudley - 我已经修改并重新编写了我的代码。 IE 8 现在一直显示栏，但仍然出现相同的问题。当我应用 CSS3 PIE 时，它所应用的类被删除。我已编辑我的问题以反映新代码。
当 CSS3Pie 使元素完全消失时，通常是 z-index 问题——css3pie 网站在其已知问题页面中对此主题进行了详细讨论。该解决方案通常涉及添加 z-index 样式，但也可能涉及 zoom:1 或其他 IE hack。

标签： internet-explorer-8 css css3pie

【解决方案1】：

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

背景/边框/阴影消失（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 作者需要能够控制选择哪一个。强制 position:relative 在 CSS 之外会使 IE 与其他浏览器不同步，从而导致混乱的不一致。

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

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

【讨论】：

【解决方案2】：

您可以设置behavior: url(PIE.php);，而不是behavior: url(PIE.htc);。

【讨论】：