Multi Column Layout im Internet Explorer 10

Permalink

Achtung: Der im folgenden beschriebene Bug scheint im Internet Explorer 11 beseitigt worden zu sein. Microsoft hat mir dies Mitgeteilt und ich kann den Fehler in der Vorabversion des Browsers unter Windows 7 ebenfalls nicht mehr nachstellen. Damit scheint der Fehler auf den IE10 beschränkt zu bleiben.

Internet Explorer 10

Der Internet Explorer 10 ist der aktuelle Browser aus dem Hause Microsoft. Er wurde zusammen mit Windows 8 veröffentlicht und mittlerweile auch für Windows 7 bereitgestellt.

Version 10 bringt Unterstützung für eine ganze Reihe zusätzlicher Standards mit die sein Vorgänger noch nicht implementiert hatte. Eines davon ist das CSS Multi-column Layout Module.

CSS Multi-column Layout Module

Das Modul aus dem Umfeld von CSS 3 definiert Eigenschaften um mehrspaltigen Textfluss auf Webseiten zu realisieren. Unter anderem lassen sich Spaltenzahl, Spaltenbreite, Spaltenabstand und Trennlinien definieren. Momentan werden die grundlegenden Bestandteile des Moduls von den meisten aktuellen Browsern unterstützt.

Beim Einsatz von Mehrspaltigen Texten sollte man mit bedacht vorgehen – wer möchte schon wieder nach oben scrollen um die nächste Spalte lesen zu können.

Bug oder Feature?

Leider scheint der Internet Explorer einen kleinen Bug zu haben wenn man das Multi-column Layout auf Listen anwendet und diese mittels der Pseudoklasse hover einblendet oder ausblendet. Das Einblenden funktioniert nämlich nur genau einmal. Wenn man den auslösenden Link mehrmals hoverd passiert gar nichts mehr – die Liste bleibt verschwunden.

Hier der Versuchsaufbau:

<a href="#">Show a multi column list while hovered
    <ul>
        <li>foo</li>
        <li>bar</li>
        <li>foo bar</li>
    </ul>
</a>

Dieses rudimentäre Markup lässt sich mit folgendem CSS verwenden um den Fehler auszulösen.

a {
    display:block; 
    color:black;
}

ul {
  columns: 2 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
}

a ul {
    display:none;
}

a:hover ul {
    display:block;
}

Life beobachten lässt sich das ganze in zwei Fiddles die ich vorbereitet habe. Im ersten Beispiel wird die Mehrspaltigkeit direkt auf die Liste angewendet. Die ebenfalls mehrspaltigen Textblöcke bleiben von dem Fehler verschont.

Das zweite Beispiel deklariert die Mehrspaltigkeit für einen Container um Textabsätze und Liste herum. Dadurch wirkt sich der Fehler auf den ganzen Container aus.

Abschließendes

Das Problem ist eingegrenzt auf Listen in einem mehrspaltigen Layout die beim hovern eines Links eingeblendet werden. Zugegebenermaßen ist das nicht der häufigste Anwendungsfall. Mir ist die Anforderung aber zugeflogen als ich ein Klappmenü umsetzte bei dem die Menüpunkte sich in zwei Spalten aufteilen sollten.

Was bleibt zu tun? Abwarten was Microsoft in dieser Sache tut und im Internet Explorer auf mehrspaltige Elemente verzichten.