internet-explorer-8 - CSS3 Pie 在 IE8 中不工作

Question

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

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

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

Here is a jsFiddle用上面的代码。

---

原始问题

---

我正在尝试使用 CSS3 Pie JS Edition 在 IE 8 中复制外观。这是我想要的样子:

这是它在 IE 8 和 CSS3 PIE 中的样子:

如您所见，当我实现 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 :

Disappearing backgrounds/borders/shadows (z-index issues)

First, a little background on how PIE renders CSS3 decorations: a single element is created which holds all the VML objects. This container element is inserted as a previous sibling to the target element, and absolutely positioned at the same coordinates. If the target element is position:absolute or position:relative, then the css3-container element is given the same z-index as the target element, and since it is a previous sibling in the DOM tree it gets displayed behind, with no possibility of any other element sneaking in between.

However, this does not work so well when the target element is position:static, because static elements do not participate in z-index stacking. The only way to make our position:absolute css3 element go behind it is to give it z-index:-1. Unfortunately, this has a bad side-effect: not only will the css3 element go behind the target element, it will also go behind the background of any ancestor element(s) which are themselves position:static. This leads to situations in which PIE creates the VML rendering correctly but it disappears behind a parent element's background.

The only way I know of to work around this is to either:

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

Both of these workarounds can have potential unwanted side-effects in terms of child element positioning and z-index stacking. PIE could easily force one or the other itself, but:

One or the other may be more appropriate depending on the particular situation, so the CSS author needs to be able to control which one gets chosen. Forcing position:relative outside of the CSS would put IE out of sync with other browsers, leading to confusing inconsistencies.

PIE therefore does neither, and it is up to the author to implement either workaround where necessary. In most cases simply adding position:relative to the target element is fine.

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