IE9でPIEスタイリングが動作しなくなった

グラデーションのPIEスタイリングを使用してWebページ（IE9、ローカル標準で使用）を開始しました。 勾配が働いて、よく見えました。他の機能をページに追加し始めました。グラデーションが消えました。私が作ったすべての変更を取り出したが、それでも動作しなかった。IE9でPIEスタイリングが動作しなくなった

ページが読み込まれると、背景がすべて白に設定される前にグラデーションのフラッシュが表示されます。

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>

出典

2016-04-08 Bob Stout

私はそうするより良い方法であることをSVGファイルを見つけたものの、IE9でグラデーションを実装する前に、私はPIE.htcを使用しています。

ここでは、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"); 
}

出典

2016-04-08 15:03:39

を私はあなたのSVGの例を使用し、まだ同じことを得ました。それから私はIE9互換モードへの参照を横断してそれをIE9に強制しました....そしてそれはうまくいったのです。結局PIEやSVGではなかったようです。それは私が以前に演奏したことがないので、私はsvgを保持します。 –

IE9でPIEスタイリングが動作しなくなった

答えて

関連する問題