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

Posted 2023-05-08

【中文标题】在 IE9 中使用 CSS3 PIE 的线性渐变不起作用，IE8 可以

【英文标题】：linear-gradient using CSS3 PIE in IE9 not working, IE8 does

【发布时间】：2012-05-14 12:15:55

【问题描述】：

我决定在我的网站中完全放弃对 IE6 和 IE7 的支持，将其用户重定向到纯文本警告页面。不过我还是支持 IE8 和 IE9。

我正在使用CSS3 PIE 实现这一点，并且边界半径在两者中都有效（IE8/9），框阴影在两者中都有效，但是我也依赖线性渐变。我使用大量标签来实现这一点：

background: #E6E6E6; /* fallback */
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7)); /* old webkit */
background: -webkit-linear-gradient(#E6E6E6, #B3BCC7); /* new webkit */
background: -moz-linear-gradient(#E6E6E6, #B3BCC7); /* firefox */
background: -ms-linear-gradient(#E6E6E6, #B3BCC7); /* meant to be IE... */
background: filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); /* also meant to be IE... */
background: -o-linear-gradient(#E6E6E6, #B3BCC7); /* opera */
background: linear-gradient(#E6E6E6, #B3BCC7); /* W3C standard */
-pie-background: linear-gradient(#E6E6E6, #B3BCC7); /* PIE */

behavior: url(/PIE.htc); /* load PIE.htc */

linear-gradient 在 IE8 中有效，但在 IE9 中无效，奇怪的是。我已经尝试了我找到的任何解决方案，但它们都没有奏效。 IE8 只显示后备：background: #E6E6E6; - 不是渐变。

我认为服务器或类似的东西没有任何问题，因为其他属性 - border-radius 和 box-shadow - 与 PIE 一起工作，但不是没有。

我的所有属性都可以在我支持的所有浏览器中使用 - 只是不是 IE9 :(

有什么想法吗？ 谢谢

【问题讨论】：

@vyegorov 我是新手...为什么它说你编辑了它？是因为你投了赞成票还是你编辑了问题？

好的，我解决了。这是filter: blablabla 不是background: filter: blablabla。现在引入了一个新问题——背景溢出了身体的边界半径。如果你仔细看，你还会看到侧面有一点透明的缝隙……img26.imageshack.us/img26/8360/ie9problems.png

我已经更新了你的消息，添加了lang-css标签。

现在我删除了整个filter: 语句，因为它破坏了 IE8 中的所有内容。回到第一方 - 如何在 IE 9 中做一个不会泄漏到圆角之外的线性渐变。它适用于 IE8，但不适用于 IE9！

【参考方案1】：

好的，这是我的解决方案。它当然不漂亮，但它确实有效。

<style type="text/css">
body
  background: #E6E6E6;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7));
  background: -webkit-linear-gradient(#E6E6E6, #B3BCC7);
  background: -moz-linear-gradient(#E6E6E6, #B3BCC7);
  background: -ms-linear-gradient(#E6E6E6, #B3BCC7);
  background: -o-linear-gradient(#E6E6E6, #B3BCC7);
  background: linear-gradient(#E6E6E6, #B3BCC7);
  -pie-background: linear-gradient(#E6E6E6, #B3BCC7);

  behavior: url(/PIE.htc); 

</style>

<!--[if IE 9]><style>body filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); behavior: url(/ie9-gradient-fix.htc);  </style><![endif]-->

编辑：如果有人想要它们，可以在 http://www.css3pie.com 找到 PIE.htc，在 http://abouthalf.com/examples/ie9roundedbackgrounds/htc.zip 找到 ie9-gradient-fix.htc。我无法让 ie9-gradient-fix.htc 工作，除非它在根目录中，PIE.htc 在我的 /resources/ 目录中工作。

【讨论】：

谢谢。似乎仍然相关，因为我在 IE9 中仍然遇到此问题

【参考方案2】：

我认为服务器或类似的东西没有任何问题，因为其他属性——border-radius 和 box-shadow——适用于 PIE，但并非没有。

PIE 不会在 IE9 中呈现边框半径和框阴影，因为 IE9 原生支持这两者。因此，它们的存在并不表明 PIE 正在发挥作用。

我的猜测实际上是您的 PIE.htc 使用了不正确的内容类型标头——IE9 对内容类型特别严格。详情请见http://css3pie.com/documentation/known-issues/#content-type。

【讨论】：

我已经这样做了。我的意思是你引用的文字没有 PIE 在 IE8 中没有任何作用。不过，我正要发布答案，我已经解决了。谢谢

lojjic 是正确的，当然，问题不在于您向我们展示的 CSS 规则，@duncan12，我在代码中做了一个小提琴 (jsfiddle.net/D6jDP/2)你的帖子。渐变在 IE8,9 和 Chrome 中为我正确显示，有和没有冗余的“背景：过滤器：progid:DXImageTransform.Microsoft.gradient”属性。

感谢@lojjic，我切换到提供 PIE.php 而不是 PIE.htc 以确保发送正确的标头。 IE9 现在玩得很好。

【参考方案3】：

我非常头疼，因为即使使用正确的内容类型标题（文本/x 组件），线性渐变在 IE9 上也不起作用。

升级到 PIE 2.0 解决了这个问题。

http://css3pie.com/2013/01/28/pie-2-0-beta-1-released

【讨论】：

谢谢，完美。比我以前使用的更好、更容易。

【参考方案4】：

太棒了！ 我使用 PIE.php 并在 IE8、IE9 中修复了这个错误（线性渐变 + 边框半径）！

要使用它，只需确保 PIE.php 和 PIE.htc 位于同一目录中，然后在您的 CSS 中将行为指向 PHP 文件：

行为：url(PIE.php);

【讨论】：

或者您可以将以下代码添加到您的 htaccess 文件中。会有同样的效果。 标题集 Content-type "text/x-component"

【参考方案5】：

ie9-gradient-fix.htc 在 IE 中为我工作。 9 但随后再次将行为从 pie.htc 更改为 pie.php 也做同样的事情。

微软的***转得太慢了，但似乎它们也可能转向相反的方向？

【参考方案6】：

在我的情况下，我使用的是 <!--[if lt IE 9]>，将其更改为 <!--[if lt IE 10]> 解决了我的问题（实际上不包括我的 IE css 文件）。

我认为**<!--[if lte IE 9]> 会做同样的逻辑。

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#88222222', EndColorStr='#00222222', GradientType=0);

PS。我没有使用 css3pie （我以为我是，derp）