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
- Lösungsmöglichkeiten
- 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
Zunächst mal die gute Nachricht. Im Firefox sieht es auf den Pixel genau sauber aus. 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 |
|---|---|---|
| Bei den Upload-Feldern steht das "Keine Datei ausgewählt" falsch. | 5.0 | Keine Ahnung, fragt Apple. |
<option>-Elemente innerhalb eines <optgroup> sind zu stark eingerückt. |
5.0 | Einrückungen werden nicht übernommen. |
Hover-Effekt bei den <select>-Feldern funktioniert nicht. |
5.0 | Macht er einfach nicht. Isso. |
| Der Abschnitt "Kenntnisse" ist höher als geplant. | 5.0 | Größere Abstände bei den einzelnen <option>-Elementen. |
Das Google Chrome dieselbe Render Engine wie der Safari nutzt, sind auch die fast Darstellungsunterschiede identisch.
Google Chrome
| Darstellungsunterschied | Version | Ursache |
|---|---|---|
<option>-Elemente innerhalb eines <optgroup> sind zu stark eingerückt. |
32.0 | Siehe Safari. |
Hover-Effekt bei den <select>-Feldern funktioniert nicht. |
32.0 | Siehe Safari. |
| Der Abschnitt "Kenntnisse" ist höher als geplant. | 32.0 | Siehe Safari. |
Tja, auch der neue Opera basiert mittlerweile auf der Webkit-Renderengine. Also sollten euch die Fehler bekannt vorkommen.
Opera
| Darstellungsunterschied | Version | Ursache |
|---|---|---|
<option>-Elemente innerhalb eines <optgroup> sind zu stark eingerückt. |
19.0 | Siehe Safari. |
Hover-Effekt bei den <select>-Feldern funktioniert nicht. |
19.0 | Siehe Safari. |
| Der Abschnitt "Kenntnisse" ist höher als geplant. | 19.0 | Siehe Safari. |
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. | 8.0, 9.0 | Allen <input>-Elementen wurde ein Rahmen zugewiesen. |
Die <fieldset>-Elemente werden nach oben gezogen. |
8.0, 9.0 | Fieldset Bleed Bug (*) |
Hover-Effekt bei den <select>-Feldern funktioniert nicht. |
8.0, 9.0 | Siehe Safari. |
| Die "Durchsuchen"-Buttons sehen anders aus. | 8.0, 9.0 | Formatierungen von <input>-Elementen werden teilweise übernommen. |
Schräge Texte in <optgroup>-Elemente. |
8.0 | Formatierung mit font-style werden nicht akzeptiert. |
<option>-Elemente innerhalb eines <optgroup> sind zu stark eingerückt. |
8.0 | Einrückungen werden nicht übernommen. |
Die <label>-Elemente haben keinen ausreichenden Abstand nach unten. |
8.0, 9.0 | Fieldset Bleed Bug (*) |
(*) 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 dem es hier ein Tutorial gibt. 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.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt