IE9 的 PIE 样式停止工作

Question

我已经开始使用 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>

Answer 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");
}

IE9 的 PIE 样式停止工作

PIE styling with IE9 stopped working

html

css

gradient

css3pie