wake-up-neo.com

HTML5 und CSS3 für IE7 und IE8

Ich habe eine Webanwendung geerbt, bei der das Frontend neue HTML5-Tags (Header, Nav, Section-Tags) und neue CSS3-Stilattribute (abgerundete Rahmen) verwendet. Die Website sieht toll aus in Google Chrome und Safari.

Der Kunde beschwert sich jedoch jetzt, dass die Website für IE7 und IE8 defekt ist. Alles ist nicht ausgerichtet und die meisten Stile werden nicht gerendert.

Was ist der einfachste Weg, um diese Website in IE7 und IE8 funktionieren zu lassen? Muss ich: A) einen Hack anwenden, damit IE-Browser die neuen HTML5- und CSS3-Funktionen akzeptieren? B) Eine vollständige Umschreibung des Frontends?

17
John

Versuchen Sie dieses schöne Skript (.js) :)
Und für abgerundete Ecken verwende ich ein anderes Skript (.htc)

benutze den 1.:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

benutze die zweite wie:

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
behavior: url(border-radius.htc);

Viel Spaß beim Sitebuilding :)

Der ursprüngliche Link ist nicht mehr aktiv und HTML5shiv wurde verschoben.

Jetzt auf GitHub verfügbar

https://github.com/aFarkas/html5shiv

27
Répás

Für HTML5 empfehle ich Remy Sharp's HTML5-Shim , obwohl der Benutzer von IE JavaScript aktivieren muss, um die Wirkung zu sehen. Grundsätzlich wird ein Fehler in IE6/7/8 ausgenutzt, durch den HTML5-Elemente erkannt werden können, nachdem sie mit der Funktion document.createElement in JavaScript erstellt wurden.

Für Ihr CSS gibt es einige verschiedene Hacks wie CSS3 PIE , die die "Behavior" -Eigenschaft (die für den IE spezifisch ist) verwenden, um CSS3-Effekte zu simulieren. Ich habe mich jedoch persönlich davon zurückgezogen, da sie meiner Erfahrung nach sehr leicht brechen und am Ende mehr Ärger haben, als sie wert sind. Ich neige eher dazu, mein CSS so zu schreiben, dass es sich im IE anmutig verschlechtert, so dass abgerundete Schaltflächen quadratisch aussehen, aber trotzdem schön aussehen.

5
Karl Nicoll

Sie könnten css3pie http://css3pie.com/ ausprobieren, was bei den css3-Problemen helfen würde.

2
Alistair Laing

modernizr http://modernizr.com/ ist eine gute Wahl.

2
Alex G

Als Ergänzung zu Karl und Alistair habe ich auf meiner Website ein Problem mit CSS3Pie festgestellt. Ich habe ihren CSS-Code von vor vier Monaten verwendet, und die CSS3-Gradienten blockierten <input type="text"/>-Felder in IE7 oder IE8. Erst als ich ihre Website erneut besuchte und ihren neuen CSS-Code sah, funktionierte es. 

Die Lektion überprüft immer die Plugins-Websites nach dem neuesten Code.

1
Danger14

Unabhängig von den neuen semantischen Tags können Sie, wenn Sie den CSS3-Effekt in IE7/8 erzeugen möchten, sicherlich asp.Net-Grafikklassen als Fallback für IE7/8 verwenden. Einige der Effekte, die mit .net-Grafiken erstellt werden können, sind -

Randradius, linearer Farbverlauf, radialer Farbverlauf, Box-Schatten ..

Sie können diesen Effekt in asp.net-Seite mithilfe von Grafikklassen erstellen und diese Seite als Hintergrundbild eines beliebigen HTML-Elements darstellen. d.h.

<div style="background:url(http://127.0.0.1/index/yourpagename.asp?param1=value1&param2=value2)"></div>

OR

<img src="http://127.0.0.1/index/yourpagename.asp?param1=value1&param2=value2" />

dabei werden Parameterwerte in Bezug auf die Ausgabe eingegeben, die zum Erzeugen des Effekts erforderlich ist. d. h. Höhe, Breite, Farbe usw.

1