CSS-Gradient funktioniert nicht richtig in Internet Explorer 11

-2

Das Problem besteht darin, dass der CSS-Farbverlauf, den ich als Teil des Hintergrunds verwende, sich alle 120 Pixel wiederholt, anstatt die gesamte Seitenlänge einzunehmen. Nach sorgfältigem Experimentieren glaube ich, dass ich herausgefunden habe, dass der Internet Explorer 11 der Meinung ist, dass die Seitenlänge nur 120 Pixel beträgt. Ich bekomme dieses Problem nicht mit Edge, Firefox oder Chrome (obwohl mir gesagt wurde, dass Chrome das gleiche Problem hat, aber das CSS ist so codiert, dass es die wahrgenommene Seitenhöhe ignoriert).CSS-Gradient funktioniert nicht richtig in Internet Explorer 11

Gibt es eine Möglichkeit, das CSS zu ändern, um Internet Explorer mitzuteilen, dass die Seitenlänge nicht 120px ist?

Relevante Daten:

Der vorhandene Code auf den Gradienten bezieht, ist:

body{background: #fdb6b4; /* Old browsers */ 
background: -moz-linear-gradient(top, #ffdadd 0%, #fdb6b4 100%); /* FF3.6-15 */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdadd), color-stop(100%,#fdb6b4)); /* Chrome4-9,Safari4-5 */ 
background: -webkit-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Chrome10-25,Safari5.1-6 */ 
background: -o-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Opera 11.10-11.50 */ 
background: -ms-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* IE10 preview */ 
background: linear-gradient(to bottom, #ffdadd 0%,#fdb6b4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdadd', endColorstr='#fdb6b4',GradientType=0); /* IE6-9 */}

Link zu dem Blog in Frage genau zu sehen, was das Problem ist: http://www.http://madinskincareland.com

oben: Wie IE11 rendert, unten: wie Firefox 51.0.1 rendert (alle anderen getesteten Browser einschließlich verfügbarer mobiler Geräte werden richtig gerendert)

Quelle

2017-02-19 Timothy Kemp

Mögliche Duplikate von [Wie man Hintergrundbild mit linearem Gradienten auf IE 11 erstellt?] (Http://stackoverflow.com/questions/19980079/how-to-make-background-image-with-linear-) gradient-work-on-ie-11) – pol

Probieren Sie http://www.colorzilla.com/gradient-editor/ – Rahul

Ich habe den Code dafür von colorzilla –

Gemäß CSS/linear-gradient Dokumentation müssen Sie background-image verwenden. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

body{ 
    background-color: #fdb6b4; /* Old browsers */ 
    background-image: -moz-linear-gradient(top, #ffdadd 0%, #fdb6b4 100%); /* FF3.6-15 */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdadd), color-stop(100%,#fdb6b4)); /* Chrome4-9,Safari4-5 */ 
    background-image: -webkit-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Chrome10-25,Safari5.1-6 */ 
    background-image: -o-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Opera 11.10-11.50 */ 
    background-image: -ms-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* IE10 preview */ 
    background-image: linear-gradient(to bottom, #ffdadd 0%,#fdb6b4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdadd', endColorstr='#fdb6b4',GradientType=0); 
}

Quelle

2017-02-19 16:44:45

Ich habe die vorgeschlagenen Änderungen gemacht, Milo, und es gibt keine Veränderung. –

In der Tat, es machte es noch schlimmer, den mint Hintergrund der Abschnitte loszuwerden. –

Ich habe das gleiche Problem mit der Anwendung des Gradienten auf den Body-Tag hat. Was ich tue, ist ein anderes Tag (z. B. Main oder Abschnitt) innerhalb des Körpers, positionieren Sie es relativ oben 0, links 0, und wenden Sie den Farbverlauf auf dieses Element. Ich hoffe das hilft!

Quelle

2017-03-23 14:08:16 Derreck

CSS-Gradient funktioniert nicht richtig in Internet Explorer 11

Antwort

Verwandte Themen