IE 8 und HTML5 - Darstellungsprobleme

[ldb]

Hallo liebe HTMLer

Nach langer Abwesenheit melde ich mich mal wieder hier bei euch - mit einem Problem und einer damit verbundenen Frage:

Ich habe mit HTML5 und CSS3 eine Website nach einem Design von mir "nachgecodet", die Darstellung und der responsive-Part funktionieren auch ganz okay in neueren Browsern. Ich habe aber leider mal wieder so meine Mühe mit dem IE8 - er stellt einen grossen Teil der Seite nicht korrekt dar. Der Grund ist eigentlich naheliegend: Der IE8 unterstützt kein HTML5 - zumindest nicht alle Tags. Dadurch kann er (ich mutmasse hier einfach) die verschiedenen Elemente wohl nicht richtig mit CSS stylen. So weit, so klar (glaube ich zumindest). Ich habe ein nettes Script gefunden, welches eigentlich die fehlenden HTML5-Funktionen für den IE8 "nachrüsten" sollte. Leider hat sich aber an der Darstellung gar nichts geändert. Deshalb meine Frage an euch: Gibt es keinen einfacheren Weg, den IE zumindest einigermassen sinnvoll zu unterstützen, als jedem HTML5-Tag eine ID zu vergeben und das Element so via CSS anzusprechen?

Dass der IE8 keine Vektorgrafiken unterstützt, ist mir klar. Ich verschwende nicht allzu viele Gedanken daran, mit fehlenden Icons kann ich leben. Die Links darunter werden ja zumindest auch im IE korrekt angezeigt.

Eine zweite kleine Frage habe ich auch noch (etwas off-topic): Mein iPad stellt leider das Bild auf der Startseite nicht im "cover"-Modus dar, sondern in seiner Originalbreite. Das sieht natürlich nicht schön aus, gibt es da einen Fix dafür? Man könnte meinen, dass iOS7 es doch schaffen sollte, einen Browser mit komplettem CSS3-Support zur Verfügung zu stellen...

Wie auch immer, ich danke euch schon jetzt für eure von mir immer sehr geschätzten Hinweise und Tipps!

Meine Seite findet ihr hier:
www.lukas-bieri.ch/avb

Die Seite ist noch im Aufbau. Leider generiert Wordpress ganz seltsame Sachen, die der Validator dann nicht als valide anerkennt... Die Original-HTML-Struktur ist aber valide.

Liebe Grüsse
Lukas

 

[threadi]

Wieso willst Du IE8 überhaupt noch berücksichtigen?

Evtl. solltest Du dir auch mal diese Fehler hier anschauen:
http://validator.w3.org/check?verbose=1&uri=http://lukas-bieri.ch/avb/

 

[ldb]

Hallo Threadi
Vielen Dank für deinen Post!

Ich möchte den IE 8 unterstützen, weil er mit Windows 7 der Standardbrowser nach der Installation ist. Leider nutzen manche (Un-)Menschen immer noch den IE 8, weil der schon standardmässig auf ihrem System installiert war und sie noch nie etwas von Windows Updates gehört haben. Ich möchte keinen allzu grossen Aufwand treiben, um IE8-Nutzer zufriedenzustellen, aber zumindest eine korrekte Darstellung des unteren Content-Bereiches und der Footers würde ich mir schon wünschen...

Die Fehler sind - wie bereits erwähnt - auf den Mist von Wordpress gewachsen. Ich habe leider keine Möglichkeit gefunden, die div-tags zu entfernen, die Wordpress standardmässig um Textwidgets erzeugt. Das gibt die letzten drei Fehler. Die ersten Fehler sind durch fehlerhafte Vektorgrafiken entstanden, da müsste ich je nach dem nochmals nachbessern. Die Vektorgrafiken spielen für mich aber momentan sowieso keine extrem wichtige Rolle.

Ich frage mich, ob es kein Script gibt, welches kompletten CSS3 und HTML5-Support für den IE8 "simuliert"? Ich kann doch nicht der Einzige mit einem solchen Problem sein...


Du fragst mich, wieso ich den IE8 überhaupt noch unterstützen will. Das klingt so, als fändest du das komplett unnötig. Hast du irgendwelche Informationen, wie verbreitet der IE8 noch ist? Je nach dem müsste ich nochmals darüber nachdenken, ob sich der Mehraufwand wirklich lohnen würde...

Wie auch immer, vielen Dank für weitere Ratschläge und guten Morgen ;)

 

[threadi]

Laut einigen von vielen Statistiken nutzen lediglich 6 Prozent noch einen IE8:
http://de.statista.com/statistik/da...e/meistgenutzte-browser-im-internet-weltweit/

Wenn man noch bedenkt, dass die eigene Webseite nur eine bestimmte Zielgruppe anspricht und die dann eher modernere Browser einsetzt, sollte man erkennen, dass auch die eigene Statistik hierfür relevant ist ;)

Die Mühe eine Webseite an diesen Browser anzupassen ist ähnlich wie eine Anpassung an IE6 vor 2 oder 3 Jahren - der Nutzen wiegt die Mühe nicht auf. Worauf man lediglich achten sollte ist, dass die Seite zumindest lesbar und benutzbar ist - die Darstellung ist dann erstmal egal.

Wieso wie in deinem Fall normale <div>-Elemente einen Fehler darstellen, kann ich nicht nachvollziehen - auch weil ich keinen IE hier habe. Mir fallen nur die o.g. HTML-Fehler auf, die auch weiterhin nicht behoben sind.

 

[ldb]

Das klingt doch mal vielversprechend - ich denke ich werde einfach eine kleine Infobox einblenden, wenn man einen älteren IE als IE9 nutzt. Dann ist man darüber informiert worden, für alles weitere ist der Nutzer selber verantwortlich.

Danke dir vielmals für deine Hilfe, Threadi!

Die Fehler kann ich leider nicht korrigieren (bis auf diejenigen in den Vektorgrafiken). Werde mal schauen, was ich da machen kann...

Bleibt noch die Frage mit background-size:cover auf dem iPad: Hat da vielleicht auch noch jemand eine Hilfestellung für mich?

Mersi viu mau ("danke vielmals" auf schweizerdeutsch)
Liebe Grüsse
Lukas

 

[MrMurphy]

Hallo

ich denke ich werde einfach eine kleine Infobox einblenden, wenn man einen älteren IE als IE9 nutzt.

Sowas ist Oberlehrerhaft und damit keine guten Idee. Wozu soll die Meldung sein?

Die IE8 Nutzer sind gewohnt, das viele Seiten bei ihnen nicht optimal angezeigt werden.

Auch das Seiten auf verschiedenen Ausgabegeräten komplett unterschiedlich dargestellt werden ist nichts ungewöhnliches mehr. Auf allen Geräten (und in allen Browsern) die gleiche Darstellung ist schlicht veraltet.

Das heißt aber nicht, das du für IE8-Nutzer nichts tun kannst oder tun solltest.

Standardmäßig solltest du älteren Browsern die neuen Elemente wie main, section u.s.w. bekannt machen. Dafür gibt es einfache Lösungen.

Dann bastelst du dir keinen Quelltext zusammen, sondern erstellst ihn strukturiert und wie es empfohlen wird, dabei natürlich auf die Semantik achten.

Und - oh Wunder: Selbst bei intensiver Nutzung von HTML5-Elementen und CSS3-Anweisungen wird die Seite im IE8 und älteren Browsern strukturiert und übersichtlich angezeigt.

Als i-Tüpfelchen noch einige wenige Anpassungen und auch IE8-Nutzer können die Seite problemlos nutzen und fühlen sich nicht vergessen.

Gruss

MrMurphy

 

[ldb]

Hallo MrMurphy

Besten Dank für deinen Beitrag!
Vermutlich hast du Recht, eine Infobox wäre vielleicht die falsche Lösung. Es ist mir klar, dass eine Website nicht in jedem Browser gleich aussehen (kann), ich habe die Seite ja auch responsive und mit einem MobileDesign designt, so sieht sie in jedem Browser etwas anders aus. Ich möchte aber natürlich schon eine gewisse Kontinuität erreichen, sprich: Der IE8 sollte doch zumindest die von mir als eingemittet definierten Objekte zentrieren...

Du sagst, dass es einfache Lösungen für den Support von Section und Main etc. gibt. Wie sehen diese aus? Gibt es dafür ein JavaScript? Dafür wäre ich sehr dankbar :)

Mein Quelltext sieht leider wirklich ziemlich wirr aus, das ist aber grösstenteils nicht auf meinen Mist gewachsen. Weil ich die ganze Seite in Wordpress umgesetzt habe, werden manche Abstände von Wordpress nicht so generiert, wie sie sollten, folglich sieht der Code ziemlich seltsam aus. Wenn man aber Einrückungen beispielsweise vom Validator automatisch vornehmen lässt, ist die Struktur (meiner Meinung nach) logisch und sauber. Ich werde aber gerne eines Besseren belehrt... ;)

Ich habe mich mal dahintergesetzt und die meisten Fehler ausgebügelt. Diejenigen, die jetzt noch übrig sind, sind kleine Vektorgrafik-Fehler, sie sollten also keine direkten Auswirkungen auf die Darstellung im IE8 haben. Diese Fehler werde ich ganz zum Schluss korrigieren.

Falls du oder jemand anderes nochmals so hilfsbereit wären und mich in die richtige Richtung bugsieren könnten, wäre ich euch sehr verbunden :)