IE9 的 PIE 样式停止工作答案

【问题标题】：PIE styling with IE9 stopped workingIE9 的 PIE 样式停止工作
【发布时间】：2016-04-08 13:42:13
【问题描述】：

我已经开始使用 PIE 样式作为渐变的网页（用于 IE9，本地标准）。 渐变效果很好，看起来不错。开始在页面中添加其他功能，渐变消失了。把我做的所有改动都拿出来了，还是不行。

页面加载时，在背景设置为全白之前，可以看到渐变闪烁。

它在 Chrome 中确实有效。

如果我取消了在渐变工作时所做的所有更改，我不明白会发生什么变化。

<!DOCTYPE html>
<html>
    <head>
        <title>Training Registration Admin</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            hr{
                border-color: ivory; //Chrome and Safari
                background-color: ivory; //firefox and Opera
                color: ivory; //IE9
            }
            div, table{
                width: 100%;
            }
            html{
                height: 100%;
            }
            body{
                color: ivory;
                background: #000000;
                background: -webkit-gradient(linear, 0 0, 0 bottom, from(#000000), to(#48525C));
                background: -webkit-linear-gradient(#000000, #48525C);
                background: -moz-linear-gradient(#000000, #48525C);
                background: -ms-linear-gradient(#000000, #48525C);
                background: -o-linear-gradient(#000000, #48525C);
                background: linear-gradient(#000000, #48525C);
                -pie-background: linear-gradient(#000000, #48525C);
                behavior: url(stylesheets/PIE/PIE.htc);
            }
        </style>
    </head>
    <body>
        <div>
            <table>
                <tr>
                    <td style="width: 33%;text-align: center;">
                        <img src="images/traininglogo.png" />
                    </td>
                    <td style="width: 33%; text-align: center;">
                        <h1>Department Training Scheduler</h1>
                    </td>
                    <td style="width: 33%;text-align: center;">
                        <img src="images/traininglogo.png" />
                    </td>
                </tr>
            </table>
            <hr>
        </div>
    </body>
</html>

【问题讨论】：

标签： html css gradient css3pie

【解决方案1】：

我之前使用 PIE.htc 在 IE9 中实现渐变，但我发现 SVG 文件是一种更好的方法。

这里有一个 SVG 文件的示例：

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
      <stop offset="0%"   stop-color="#000000" stop-opacity="1"/>
      <stop offset="100%" stop-color="#48525C" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <rect width="100%" height="100%" style="fill:url(#myLinearGradient1);" />
</svg>

要在您的代码中使用它，只需这样做：

header {
  background-image: url("svg-gradient.svg");
}

【讨论】：

我使用了您的 svg 示例，但仍然得到相同的结果。然后我遇到了对 IE9 兼容模式的引用并将其强制为 IE9 ......并且它起作用了。看起来，毕竟不是 PIE 或 SVG。我会保留 svg，因为这是我以前从未玩过的东西。