7

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

我正在使用CSS3 PIE来实现这一点，并且border-radius 在两者（IE8/9）中都有效，box-shadow 在两者中都有效，但是我也依赖于线性渐变。我使用大量标签来实现这一点：

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 */

奇怪的是，线性渐变在 IE8 中有效，但在 IE9 中无效。我已经尝试了我找到的任何解决方案，但它们都没有奏效。IE8 只显示回退：背景：#E6E6E6；- 不是渐变。

我认为服务器或类似的东西没有任何问题，因为其他属性 -边界半径和框阴影- 与 PIE 一起工作，但并非没有。

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

有任何想法吗？
谢谢

4

6 回答 6

6

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

<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/ 目录中工作。

于 2012-05-06T03:04:27.267 回答
5

我认为服务器或类似的东西没有任何问题，因为其他属性 - 边界半径和框阴影 - 与 PIE 一起工作，但并非没有。

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

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

于 2012-05-06T02:59:10.257 回答
2

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

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

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

于 2013-04-03T19:47:38.890 回答
0

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

轮子在微软转得很慢，但似乎它们也可能转向相反的方向？

于 2013-03-09T12:14:10.283 回答
0

就我而言，我正在使用<!--[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）

于 2014-01-30T00:49:54.953 回答
0

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

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

行为：url（PIE.php）；

于 2012-12-28T08:53:46.083 回答