IE7: a-Tag border-bottom Bug und Workaround [Upd.]

Mit dem IE7 hat Microsoft es wieder einmal geschafft es Webdesigner noch eine Runde schwieriger zu machen, denn jeder neue Browser bringt auch neue Fehler mit sich. über einen solchen bin ich die Tage gestolpert, als ich per CSS einem a-Tag einen unteren Rand verschaffen wollte und der IE7 sich beharrlich weigerte diesen anzuzeigen ( IE 6 und FF funktionieren). Zum Glück ist der IE7 noch nicht so verbreitet, aber das wird sich mit der Zeit andern.

Internet Explorer 7 a-Tag border-bottom Bug und Workaround Screenshots

Jedenfalls habe ich mir mal ein Testszenario geschrieben, um den Effekt zu testen und nach einer Lösung zu suchen. Dabei wurde das Verhalten des IE7 nur umso rätselhafter. Als ich eine Lösung gefunden hatte, wollte ich zur Dokumentation des Fehlers eine Testseite schreiben, die Fehler und Lösung gegenüberstellt. Doch während ich noch so testete schien es auf einmal, als würde der Code, der eben noch den Fehler im IE7 produzierte, auf einmal funktionieren und dafür ein anderer Code nicht mehr.

In meinen Beispielen wird klar, dass das fehlerhafte Verhalten, die Nichtanzeige der Border-bottom für ein a-Tag, nur im letzten DIV auftritt, dessen Klasse diese Anpassung des a-Tags beinhaltet. Dabei ist es scheinbar sogar unerheblich, ob man eine solche Klasse mehrfach anwendet, oder unterschiedliche Klassen mit dieser Eigenschaft definiert hat.

Letzten Endes hilft die Verwendung des float-Attributs auch im IE7 den Fehler komplett zu unterdrücken.

Update:
Kaum habe ich den Artikel abgeschickt merke ich, dass auch wenn nach dem „Bug-DIV“ noch Content kommt, der Bug unterdrückt wird. So richtig klar ist das Fehlerbild für mich damit nicht, denn ich kenne auch wenigstens ein fertiges Webdesign, wo dieser Bug in der Navigation auftrat und natürlich kam nach dem betroffenen DIV noch reichlich Inhalt.

Die Testseiten für Bug und Workaround:

Kommentare (8)

  1. Darber war ich auch schon einmal gestolpert. Ist wirklich gemein und ganz klasse, wenn da schon etwas mehr Source drum herum gebaut ist. *grummel*

    Aber witziger Workarround. Ich hatte es, als ich nach Stunden endlich dahinter gekommen war, mit einem einfachen   vor dem Schlieen des Bodytags gelst.

  2. Und wie bist du auf den NBSP-Trick gekommen? Bei mir war es reiner Zufall. Ich habe so lange probiert, bis mal etwas hingehauen hat, dass mir nicht dem eigentlich angedachten Layout zuwider lief. Bei einer verikalen Navigation reicht es den Kram als block zu definieren.

    Ich hatte wie gesagt auch schon den Fall, dass die Site komplett stand. Im oberen Codedrittel war die Navigation, darunter kam der ganze Content und dennoch der Bug… Fr jemanden wie mich, der eigentlich Software-Entwickler ist, ist sowas der absolute Horror, weil man das Problem nicht logisch betrachten, nachverfolgen und beheben kann.

    Es ist von auen betrachtet einfach unlogisch :(

  3. War auch bei mir reiner Zufall, dass ich ber die Problemlsung gestolpert bin. Und auch nur, weil ich eine zweite Seite im Entwurf mit Content hinter dem DIV-Tag hatte. Ohne diesen Glcksfall wrde ich wahrscheinlich noch heute suchen. ;(

  4. gebe doch einfach mal dem umgebenden element etwas padding ….

  5. Was mir auch aufgefallen ist:
    Der IE kennt bei border keine Farbwerte, die ausgeschrieben sind. Da kennt er nur „border:black;“. Ebenfalls durch probieren draufgekommen. Ja, ja, wenn man dass alles als Witz betrachten würde wärs echt lustig. Leider ist es kein Witz…

  6. Umgebendem Element (in meinem Fall dem ) etwas padding-bottom geben hat geholfen.
    Und zwar exakt soviel px wie es margin-top hatte…
    ;-)

  7. Mensch war ich nun froh als ich diesen Bericht gefunden habe!!!

    Ich hab mich ja schon an diverse Bugs des IE`s gewöhnt, aber über diesen bin ich doch noch nie gestolpert, und selten hat mir eine Kleinigkeit wie diese so viele Nerven gekostet!

    Ich glaube zu meinen mich mit CSS etwas auszukennen, aber das macht absolut keinen Sinn, und wäre ohne diesen Beitrag wohl nie auf die Lösung gekommen.

    Bei mir hat ein „unnützer“ float: none, und dann noch gleichviel padding wie Liniendicke geholfen.

    Bin froh dass das nun erledigt ist, aber verstehen werde ich dies wohl nie! Oder besser, IE verstehen werde ich wohl nie!

    Danke!

Kommentare sind geschlossen.