PIE Styling mit IE9 funktioniert nicht mehr

Ich hatte eine Webseite (für den IE9, den lokalen Standard) mit PIE-Styling für den Farbverlauf gestartet. Die Steigung arbeitete, sah gut aus. Begann, der Seite weitere Funktionen hinzuzufügen, und der Farbverlauf verschwand. Nahm alle Änderungen aus, die ich gemacht habe, und es hat immer noch nicht funktioniert.PIE Styling mit IE9 funktioniert nicht mehr

Wenn die Seite geladen wird, können Sie den Verlauf blinken sehen, bevor der Hintergrund auf Weiß gesetzt wird.

Es funktioniert in Chrome.

Ich verstehe nicht, was sich geändert hat, wenn ich alle Änderungen zurückgenommen habe, die ich gemacht habe, als der Gradient funktionierte.

<!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>

Quelle

2016-04-08 Bob Stout

Ich habe verwendet PIE.htc vor Steigungen in IE9 zu implementieren, obwohl ich SVG-Dateien gefunden ein besserer Weg, dies zu tun.

Hier sehen Sie ein Beispiel für eine SVG-Datei haben:

<?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>

Um es in Ihrem Code zu verwenden, dies nur tun:

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

Quelle

2016-04-08 15:03:39

verwendete ich Ihr svg Beispiel, und immer noch die gleiche Sache . Dann stieß ich auf einen Verweis auf den IE9 Kompatibilitätsmodus und zwang es zu IE9 .... und es funktionierte. War es nicht die PIE oder SVG, so scheint es. Ich werde die SVG behalten, weil es etwas ist, mit dem ich vorher noch nie gespielt habe, tho. –

PIE Styling mit IE9 funktioniert nicht mehr

Antwort

Verwandte Themen