Le style de PIE avec IE9 a cessé de fonctionner

J'avais commencé une page Web (pour l'usage avec IE9, la norme locale) utilisant le style de PIE pour le gradient. Le dégradé travaillé, avait l'air bien. Commencé à ajouter d'autres fonctionnalités dans la page, et le dégradé a disparu. Retiré tous les changements que j'ai faits, et cela n'a toujours pas fonctionné. Lorsque la page est chargée, vous pouvez voir le flash dégradé avant que l'arrière-plan soit entièrement blanc.Le style de PIE avec IE9 a cessé de fonctionner

Cela fonctionne dans Chrome.

Je ne comprends pas ce qui a changé si j'ai annulé tous les changements que j'ai faits lorsque le dégradé a fonctionné.

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

Source

2016-04-08 Bob Stout

Je l'ai utilisé PIE.htc avant de mettre en œuvre des gradients dans IE9, bien que je trouve des fichiers SVG être une meilleure façon de le faire.

Ici vous avez un exemple d'un fichier 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>

Pour utiliser dans votre code, que faire:

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

Source

2016-04-08 15:03:39

je votre exemple svg, et toujours eu la même chose . Ensuite, j'ai couru à travers une référence au mode de compatibilité IE9 et l'a forcé à IE9 .... et cela a fonctionné. Ce n'était pas le PIE ou le SVG après tout, semble-t-il. Je vais garder le svg parce que c'est quelque chose avec lequel je n'ai jamais joué auparavant. –

Le style de PIE avec IE9 a cessé de fonctionner

Répondre

Questions connexes