Die alten Internet-Explorer sehen das Internet anders. Es gibt eine Menge Eigenheiten. Hier ein paar Tools und Tipps bei der Web-Entwicklung.
Es gibt ein schönes Freeware-Program namens IE-Tester. Weil es auf die Internet-Explorer Bibliotheken im System zurückgreift, gibt es dies leider nur für Windows aber es kann eine große Hilfe bei der Entwicklung der eigenen Seite sein. Diese Abhängigkeit hat natürlich auch die Vorteile, dass jene Fehler die zu den Darstellungsproblemen in diesen MS-Browsern führen, wahrscheinlich hundertprozentig enthalten sind. Hier können bestimmte Elemente die bei älteren IE-Versionen nicht passen, gesehen und vielleicht noch mit anderen Codes gerade gerückt werden. Im Programm gibt es IE-Version-Tabs ab 5.5. Diese ganz alte Version funktioniert aber nur bei älteren Windows-Systemen. In einem aktuellen Windows 8.1 funktionierte dieses Tab bei mir nicht.
Wer kein Windows hat oder gar nicht nutzen möchte, kann dennoch mit Alternativen experimentieren. Am kompliziertesten wäre eine VM-Lösungen. Hier diverse Windows-Versionen mit den unterschiedlichen Internet-Explorern einzurichten ist wenig attraktiv und fällt daher heute wohl komplett weg.
Es gibt daher noch Online-Service-Anbieter die genau so eine IE-Testfunktion anbieten. Da hätten wir netrenderer.de. Dieser Service war im Test aber sehr langsam. Er zeigt auch nur einen Screenshot der Seite, wie er im entsprechenden IE aussieht.
Wesentlich komfortabler und komplexer kommt ein Service daher, welcher direkt von Microsoft angeboten wird. Mit modern.ie gibt es eine Lösung die diverse Tipps und Tricks auf modernes Webdesign und seine Tücken, nicht nur mit älteren IEs gibt. Hier kann sich die eigene Website auch auf verschiedenen Geräten und Systemen angeguckt werden. Dies funktioniert ebenfalls über diverse Screenshots. Codetipps gibt es hier auch um Geschwindigkeit zu erhöhen und Fehler zu reduzieren, diese dann aber doch stärker auf die Browser von Microsoft gemünzt.
Die eigentlich typische Codeüberprüfung sollte wohl eher vom W3C, also vom World Wide Web Consortium genutzt werden. Das Consortium wacht und beschließt den Webstandard. Hier gibt es den Validator. Dieser überprüft Quellcode auf seine valide Form. Dies aber nur nebenbei. Er hilft natürlich nicht um eine Seite zusätzlich an die Probleme der IEs anzupassen. Wer aber einen validen Code sein eigen nennt, reduziert zumindest schon einmal weitere mögliche Fehlerquellen.
Ich bin persönlich mal wieder auf einige IE-Probleme gestoßen. Das erste offensichtliche im IE6 und 7 sind PNGs mit transparenten Hintergründen. Diese können nicht dargestellt werden und zerstören oft das Bild der Seite.
Hier einige Lösungen die bei älteren IEs bedacht werden müssen:
Bei der PNG-Lösung gibt es mehrere Ansätze:
- PNGs wenn möglich ohne transparenten Hintergrund abspeichern.
- Als GIF abspeichern. Durch die starke Komprimierung auf 256 Farben bei komplexen Bildern kaum nützlich.
- PNGFix auf JavaScript-Basis per Browserweiche einbinden. Hier gibt es die Dokumentation zum Fix: www.twinhelix.com/css/iepngfix/demo/
- Einen Microsoft Filter per CSS aufrufen:
.bild {
width:300px;
height:80px;
background: url(/ordner/bild.png) no-repeat;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/ordner/bild.png',sizingMethod='crop');
_background:none;
} Die alten Microsoft-Browser konnten oftmals die banalsten Dinge noch nicht. Wie das Einrücken der ersten Zeilemit text-indent in einem input-Feld per CSS.
input { text-indent: 10px; }
/*andere Lösung*/
input { padding: 0 0 0 10px; }Auch sehr unschön: Ausgaben mit Floats. Beispielsweise ein waagerechtes Menu aus einer Liste. Desto komplizierter die Liste, desto mehr muss man auf die alten IEs achten. Einfache Listenpunkte mit Links werden bei ihnen immer in voller Breite angezeigt und somit sortieren sie sich meist untereinander, obwohl mit einem float: right oder float:left diese in die Waagerechte gebracht werden sollten. Wichtig ist hier dem li-Element eine automatische Breitenzuweisung zu geben. Moderne Browser machen dies automatisch, wenn dies nicht angeben ist. Alte IEs machen es halt nicht.
ul {list-style-type: none;}
ul li {width:auto;float: left;display: block;}
ul li a {float: left;display: block; /*Block optional*/}Interessant wird es auch mit absolute positionierten Boxen. Wenn eine solch absolute positionierte Box hinter einer anderen Box oder Bild auftaucht, dann kann es vorkommen dass die absolute, also schwebende Box nicht über den Elementen erscheint (was eigentlich richtig wäre), sondern im IE6 und 7 daneben. Eine korrekte Positionierung macht sich dann für alle Browser schwer. Hier greift man zum Style-Element display:inline. Dies erlaubt es uns, die schwebende Box für alle Browser wie im IE6 und 7 „falsch“ zu positionieren. Damit wäre für alle Browser die Darstellung wiederhergestellt und es kann aus dieser Grundposition weitergearbeitet werden.
div {position:absolute;display:inline;}Glücklicherweise sind die meisten User heutzutage kaum noch mit völlig überholten Browsern unterwegs. Das größte Problem der heutigen Zeit sind mehr die unterschiedlichen Geräteformen und das Anpassen des Designs auf unterschiedliche Auflösungen, sprich einem responsive Design. Dennoch können diese Tipps auch heute noch Besserung bringen, sind aber kein Garant das sie gleich funktionieren. Es bedarf vielleicht sogar einer Variation eines Tipps oder gar eines völlig neuen Ansatzes um seine Probleme mit dem IE zu lösen. Sicher ist, dass man sich auch heutzutage, wenn man die alten IE-Nutzer mit einbeziehen möchte, sich teils einige Stunden damit beschäftigen kann.