CSS3饼不工作在IE8 [英] CSS3 Pie Not Working in IE8
问题描述
UPDATE 这似乎是IE8中 background 的问题。 CSS3 PIE似乎工作正常，但是当我有一个背景，它不显示。如果我删除的背景css完全显示再次。 IE：
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 */
}
现在我的问题变成了CSS3 PIE在IE 8中以正确的方式工作 背景？
Now my question turns into how do I get CSS3 PIE to work properly in IE 8 with a background?
我试图使用CSS3 Pie JS Edition在IE 8中复制一下。这是我想让它看起来像：
I am attempting to replicate a look in IE 8 using CSS3 Pie JS Edition. Here is what I want it to look like:
以下是使用CSS3 PIE在IE 8中的显示方式：
Here is the way it looks in IE 8 with CSS3 PIE:
正如你可以看到当我实现CSS3 PIE框消失！我以前没有使用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:
注意 ：我使用JS版本并且没有服务器端访问，因此不能使用 .htc 文件。）
这是我的代码调用CSS3 Pie：
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]-->
这里是HTML和CSS：
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;
}
推荐答案
在问题之上的评论是一个z-index问题，作为在CSS3 PIE网站上描述：
As @Spudley mentioned in a comment above the issue was a z-index issue as described on the CSS3 PIE Website:
消失的背景/边框/阴影（z-索引问题）
首先，有关PIE如何渲染CSS3装饰的一些背景：创建一个包含所有VML对象的单个元素。此容器元素作为前一个兄弟插入到目标元素，并且绝对定位在相同的坐标。如果目标元素是position：absolute或position：relative，那么css3-container元素将被赋予与目标元素相同的z-index，并且由于它是DOM树中的前一个同级元素，它将显示在后面，
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.
但是，当目标元素为position：static时，这样做效果不好，因为静态元素不参与z-index堆叠。唯一的方法来使我们的位置：绝对css3元素后面它是给它z-index：-1。不幸的是，这有一个坏的副作用：不仅将css3元素后面的目标元素，它也将落后于任何祖先元素的背景，其本身为位置：静态。这导致PIE正确创建VML渲染的情况，但它在父元素的背景之后消失。
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.
这两种解决方法在子元素定位和z-index方面都有潜在的不良副作用堆叠。 PIE很容易强迫一个或另一个本身，但：
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:
一个或另一个可能更适合取决于具体情况，所以CSS作者需要能够控制哪一个被选择。
强制位置：CSS之外的相对位置会使IE与其他浏览器不同步，导致混淆不一致。
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既不会直到作者在必要时实施任一解决方法。在大多数情况下，只需添加position：相对于目标元素即可。
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.
解决方案可能会导致其他问题。我最终问自己是值得的麻烦来创建圆角吗？对于一些网站，是的，对于其他人，这是你的选择。
The solution can cause other issues. I ended up asking myself is it worth the hassle to create rounded corners? For some sites, yes it would be, for others, well it is your choice.
这篇关于CSS3饼不工作在IE8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
