CSS3-Gradient-problem im IE

Warum dieser CSS-3-gradiant-funktioniert nicht im IE9. Es zeigt nur den einfachen hintergrund Farbe, nicht jede gradiant. Gibt es etwas falsch mit ihm? Danke.

background: #999; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); 
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); 
background: -moz-linear-gradient(top,  #ccc,  #000);
  • CSS3Please ist immer nützlich für diese Art der Sache.
InformationsquelleAutor Lucka | 2011-01-13
  1. 4

    Tut IE9 tatsächlich Unterstützung Verläufe? Ich weiß, dass es nicht viel von CSS3. Du könntest versuchen Sie bei diese Artikel, es hat einen workaround für den IE beim verwenden von Verläufen.

    In Bezug zu Ihrem code, müssen Sie möglicherweise auch die Zeile:

    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000')";

    Oder fügen Sie die GradientType=0 in Ihre filter-string auch. (Aus diese Website)

    • Das sollte -ms-filter und das bit nach dem Doppelpunkt muss in doppelte Anführungszeichen
    • Ahh, mein Fehler, danke!
    • +1 Dieser arbeitete für mich. Ich Schätze die Hilfe!
    InformationsquelleAutor DanielGibbs
  2. 1

    Hier ist ein netter workaround-Lösung mit PHP aus, um eine SVG-Gradienten statt, die ermöglicht es uns, halten unsere design-in unseren stylesheets.

    <?

header('Content-type: image/svg+xml; charset=utf-8');
echo '<?xml version="1.0"?>
';

$from_stop = isset($_GET['from']) ? $_GET['from'] : '000000';
$to_stop = isset($_GET['to']) ? $_GET['to'] : '000000';

?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" preserveAspectRatio="none" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
            <stop offset="0%" stop-color="#<?=$from_stop?>" stop-opacity="1"/>
            <stop offset="100%" stop-color="#<?=$to_stop?>" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" style="fill: url(#linear-gradient);"/>
</svg>

    Einfach laden Sie Sie auf Ihren server und rufen Sie die URL wie folgt:

    gradient.php?from=f00&to=00f

    Dies kann verwendet werden, in Verbindung mit Ihrem CSS3-Farbverläufe wie diese:

    .my-color {
    background-color: #f00;
    background-image: url(gradient.php?from=f00&to=00f);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
    background-image: -webkit-linear-gradient(top, #f00, #00f);
    background-image: -moz-linear-gradient(top, #f00, #00f);
    background-image: linear-gradient(top, #f00, #00f);
}

    Wenn Sie brauchen, um den Gegner unter IE9, können Sie immer noch die alten proprietären 'filter' - Methode:

    .ie7 .my-color, .ie8 .my-color {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}

    Natürlich können Sie ändern Sie den PHP-code hinzufügen, mehr Haltestellen auf der Steigung, oder machen es mehr anspruchsvolle (radiale Farbverläufe, Transparenz, etc.) aber dies ist ideal für diejenigen, die einfach (vertikal) lineare Verläufe.

    InformationsquelleAutor neave
  3. 0

    Haben Sie diesen code:

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

    Denke ich, sollten Sie dies ändern:

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCCFF, endColorstr=#000000FF);
    InformationsquelleAutor icant
  4. 0

    Die beste Lösung für die Steigungen auf der DH ist die Verwendung eines gradient-image und repeat-x. Setzen, die im hintergrund und wo Sie es wollen. Nicht alle Browser ziehen, Farbverläufe sauber, und Sie verschwinden manchmal, wenn Sie tun.

    <table id="tabs_desc" cellpadding="0" cellspacing="0" width="100%"
  style="
    background:url('blue_gradient.png') transparent repeat-x;
    *background:url('blue_gradient_long.png') transparent repeat-y; /* Special for IE */
    width:  100%;
    background-size: contain;
    color:  #fff;
    padding: 10px;
    font-family:  Calibri;
    font-size:  11pt;
    font-weight:  bold;
    "
> ...

    Hoffe, das hilft!

    InformationsquelleAutor bearcatFulton
Schreibe einen Kommentar