HTML / CSS - Praxistutorial 4 - Darstellungsunterschiede
1. Die Abschnitte
- Überblick
- Standardanweisungen
- Das Formular
- Abschnitte zusammenfassen
- Allgemeine Formatierungen Teil 1
- Allgemeine Formatierungen Teil 2
- Adresse und Anstellung
- Daten und Kenntnisse
- Mitteilung und Buttons
- Darstellungsunterschiede
- Allgemeines Lösungsmöglichkeiten
- Hacks für den Internet Explorer
- Die letzte Rettung
2. Das böse Erwachen
So, jetzt schaut euch mal das Ergebnis in allen Browsern an, die euch zur Verfügung stehen. Und dann werdet ihr feststellen, dass nichts so ist, wie es sein sollte. Zunächst mal gibt es eine Übersicht über alle Abweichungen in den einzelnen Browsern. Ich hoffe, ich habe keine übersehen.
3. Unterschiede zum Firefox 5
Zunächst mal die gute Nachricht. Im Firefox 3.5 und 4.0 sieht es auf den Pixel genau so aus wie im 5er. Und nun die schlechte Nachricht. Jetzt kommen die anderen Browser dran. Fangen wir mit dem an, der die geringsten Probleme bereitet.
Safari
| Darstellungsunterschied | Version | Ursache |
|---|---|---|
| Die "Upload"-Felder sehen anders aus. | 4.0, 5.0 | Formatierungen von <input>-Elementen werden teilweise übernommen. |
<option>-Elemente innerhalb eines <optgroup> sind zu stark eingerückt. |
4.0, 5.0 | Einrückungen werden nicht übernommen. |
Hover-Effekt bei den <select>-Feldern funktioniert nicht. |
4.0, 5.0 | Macht er einfach nicht. Isso. |
| Der Abschnitt "Kenntnisse" ist höher als geplant. | 4.0, 5.0 | Größere Abstände bei den einzelnen <option>-Elementen. |
Das Google Chrome dieselbe Render Engine wie der Safari nutzt, sind auch die Darstellungsunterschiede identisch.
Google Chrome
| Darstellungsunterschied | Version | Ursache |
|---|---|---|
| Die "Upload"-Felder sehen anders aus. | 12.0 | Siehe Safari. |
<option>-Elemente innerhalb eines <optgroup> sind zu stark eingerückt. |
12.0 | Siehe Safari. |
Hover-Effekt bei den <select>-Feldern funktioniert nicht. |
12.0 | Siehe Safari. |
| Der Abschnitt "Kenntnisse" ist höher als geplant. | 12.0 | Siehe Safari. |
Der Opera hält sich auch noch ganz gut, weicht aber trotzdem stärker vom "Original" ab.
Opera
| Darstellungsunterschied | Version | Ursache |
|---|---|---|
| Die "Upload"-Felder sehen anders aus. | 10.5, 11.0, 11.5 | Formatierungen von <input>-Elementen werden teilweise übernommen. |
| Der Abschnitt "Kenntnisse" ist höher als geplant. | 10.5, 11.0, 11.5 | Größere Abstände bei den einzelnen <option>-Elementen. Und der Abschnitt "Ihre Daten" ist deutlich kleiner. |
| Der Abschnitt "Ihre Daten" ist zerschossen. | 10.5 | Wahrscheinlich ein Problem bei dieser Art des <label>-Aufbaus. |
| Radio-Elemente haben einen Rahmen | 10.5, 11.0, 11.5 | Allen <input>-Elementen wurde ein Rahmen zugewiesen |
Zu guter Letzt mal wieder unser Problembär aus Redmond. Denn bei dem sind die Unterschiede zum Teil gravierend.
Internet Explorer
| Darstellungsunterschied | Version | Ursache |
|---|---|---|
| Radio-Elemente haben einen Rahmen. | 6,0, 7.0, 8.0, 9.0 | Allen <input>-Elementen wurde ein Rahmen zugewiesen. |
Die <fieldset>-Elemente werden nach oben gezogen. |
6,0, 7.0, 8.0, 9.0 | Fieldset Bleed Bug (*) |
Das <fieldset> "Kenntnisse" ist nicht auf Höhe mit dem linken Abschnitt. |
6,0, 7.0 | Summe mehrerer Fehler. |
Hover-Effekt bei den <select>-Feldern funktioniert nicht. |
6,0, 7.0, 8.0, 9.0 | Siehe Safari. |
| Die "Durchsuchen"-Buttons sehen anders aus. | 6,0, 7.0, 8.0, 9.0 | Formatierungen von <input>-Elementen werden teilweise übernommen. |
Schräge Texte in <optgroup>-Elemente. |
6,0, 7.0, 8.0 | Formatierung mit font-style werden nicht akzeptiert. |
<option>-Elemente innerhalb eines <optgroup> sind zu stark eingerückt. |
6,0, 7.0, 8.0 | Einrückungen werden nicht übernommen. |
Die <label>-Elemente haben keinen ausreichenden Abstand nach unten. |
6,0, 7.0, 8.0, 9.0 | Fieldset Bleed Bug (*) |
Die <label>-Elemente sind zu weit nach rechts gerückt. |
6,0, 7.0 | Hängt möglicherweise auch mit dem Fieldset Bleed Bug zusammen. |
(*) Ein Hinweis
Angeblich sollte der Internet Explorer ab Version 8 diesen Bug nicht mehr haben. Zunächst mal könnte man vermuten, dass es mit der Kompatibilitätsansicht zu tun hat, zu der ich bald ein Tutorial schreiben werde. In diesem Fall ist es aber nicht so. Der IE befindet sich korrekterweise im 8er-Standardmodus.
Leider kann ich das Verhalten nicht nachvollziehen. Siehe dazu auch diesen Thread aus meinem Lieblingsforum. Tests auf verschiedenen Rechnern in meiner Firma ergaben dasselbe Resultat.