CSS3 Pie 在 IE8 中不起作用

Posted

技术标签:

【中文标题】CSS3 Pie 在 IE8 中不起作用【英文标题】:CSS3 Pie Not Working in 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。 【参考方案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);

【讨论】:

以上是关于CSS3 Pie 在 IE8 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

在 IE9 中使用 CSS3 PIE 的线性渐变不起作用,IE8 可以

overflow-x在IE8中不起作用

为啥 Bootstrap 3 导航栏下拉菜单在 IE8 中不起作用?

jquery验证在IE8中不起作用

设置 PIE.htc 的文件位置

jQuery Toggle 在 IE8 中不起作用