Der Fortschritt und der IE 6
Joachim
- css
0 molily
hi,
Zum Wesen des Browser-Fortschrittes sollte auch eine bessere CSS-Implementierung gehoeren. Leider ist dem offenbar nicht immer so, wie zwei Beispiele zeigen, bei denen IE6 / PC sich ausgesprochen seltsam verhaelt.
Da aber bereits der IE5 / Mac diese Beispiele problemlos darstellt, kann man sich nur noch wundern. Das Moz keine Probleme hat, braucht wohl nicht erwaehnt zu werden.
1. IE6 schneidet Top und Bottom Border eines im div-container plazierten Linkes ab, nur eine Trickeserei mit fester height-Angabe und einem padding-top (fuers div) ermuntern ihn zur korrekten Darstellung:
<html><head>
<style type="text/css">
#ebene0 {
position:absolute;
top:100px;
left:100px;
}
a.lnk {
border: 1px solid Black;
padding : 4px;
}
a.lnk:hover {
border : 1px solid Red;
padding : 4px;
}
</style>
</head>
<body>
<div id="ebene0"><a class="lnk" href="#">link</a></div>
</body>
</html>
2. Laut w3c werden clipping-Argumente durch Komma getrennt. Ausgerechnet wenn Doctype gesetzt wird (also quirks-Modus ausgeschaltet wird), ist IE6 dazu nicht mehr in der Lage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style type="text/css">
#ebene0 {
position:absolute;
top:100px;
left:100px;
width:100px;
height:100px;
background-color: red;
clip: rect(0px, 50px, 50px, 0px); /* korrekt*/
}
#ebene1 {
position:absolute;
top:100px;
left:210px;
width:100px;
height:100px;
background-color: blue;
clip: rect(0px 50px 50px 0px); /* nicht korrekt*/
}
</style>
</head>
<body>
Clipping Vergleich
<div id="ebene0">EBENE 0</div>
<div id="ebene1">EBENE 1</div>
</body>
</html>
Das sich verschiedene IE-Versionen hier unterschiedlich verhalten, macht die Sache ziemlich aergerlich. Da kann man wohl nur auf den Fortschritt hoffen ;-)
Gruesse Joachim
Hallo, Joachim.
- IE6 schneidet Top und Bottom Border eines im div-container plazierten Linkes ab, nur eine Trickeserei mit fester height-Angabe und einem padding-top (fuers div) ermuntern ihn zur korrekten Darstellung: [...]
Das mag zwar nicht richtig sein, aber es ist nachvollziehbar (die Linebox liegt teilweise außerhalb des Elternelements), was einen Workaround einfach macht, beispielweise #ebene0 {... padding:6px 0;}. Eventuell könnte man auch direkt das a-Element absolut positionieren, dann bleibt nur ein leeres div-Containerelement im Fluss zurück.
- Laut w3c werden clipping-Argumente durch Komma getrennt.
"In CSS2, the only valid <shape> value is: rect (<top> <right> <bottom> <left>)"
http://www.w3.org/TR/REC-CSS2/visufx.html#propdef-clip
Da sehe ich kein Komma. Nur die Beispiele verwenden Kommas - formal sind die Beispiele fehlerhaft.
"In CSS 2.1, the only valid <shape> value is: rect (<top>, <right>, <bottom>, <left>)"
http://www.w3.org/TR/CSS21/visufx.html#clipping
Aha, wir kommen der Sache auf den Grund - von CSS 2.1 kann IE6 nichts wissen, es interpretiert die Syntax also CSS2-konform. MSDN sagt übrigens auch: keine Kommas.
Ausgerechnet wenn Doctype gesetzt wird (also quirks-Modus ausgeschaltet wird), ist IE6 dazu nicht mehr in der Lage:
Dann nehme ich doch sehr stark an, dass MSIE denkt, dass die Version ohne Kommas standardkonform ist - bei "wortwörtlicher" Betrachtung des aktuellen CSS2-Standards sind auch keine Kommas nötig, aber interessant ist, dass Microsoft den ungenauen Standard als Anlass genommen hat, eie Fehlertoleranz einzubauen, und dass IE im standardkonformen Modus die Kommaversion ignoriert, ist strenggenommen sogar richtig. Das ist wie mit dem Refer(r)er-Fehler in HTTP - der Standard hat den Fehler, aber alle halten sich an den Standard.
Lösung: Gib dem MSIE ausschließlich clip mit CSS2-Syntax, beispielsweise über conditional comments.
Das sich verschiedene IE-Versionen hier unterschiedlich verhalten, macht die Sache ziemlich aergerlich. Da kann man wohl nur auf den Fortschritt hoffen ;-)
IE 5.x rendert unaufhörlich standardinkompatibel, was erwartest du...
Grüße,
Mathias