!Willkommen IE9

Wie man einen Bug entdeckt...

Henning über Internet Explorer

Gibt’s das? Man installiert einen neuen Browser, der vollmundig verspricht mit ihm werde das Internet „schneller, einfacher und ansprechender“, denn „im Mittelpunkt steht das, was wirklich wichtig ist – die Internetseite“ – und dann das…

Mit einen neuen Browser ausgestattet, der text-shadow, border-radius, etc anzeigt – alias IE9 (Version 9.0.8112.16421) – macht man sich daran eine einfache Tabelle in HTML zu designen. Folgende Ansprüche an die Tabelle sind zu erfüllen:

  • in Container mit overflow, falls die Tabelle zu breit für die Anzeige ist
  • Checkboxen in der ersten Spalte der Tabelle, um Tabellenzeilen zu markieren

Der Code könnte wie folgt aussehen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>IE9 - Bug</title>
</head>

<body style="margin: 40px;">
<div style="overflow: auto; margin: 5px 8px 5px 5px; background: aqua;">
    <table border="1" id="main-table" style="width: 1900px; border-collapse:collapse">
    <thead>
            <tr>
                    <th style="width: 20px"><input type="checkbox" /></th>
                    <th style="width: 130px">1-2</th>
                    <th style="width: 100px">1-3</th>
                    <th style="width: 100px">1-4</th>
                    <th style="width: 100px">1-5</th>
                    <th style="width: 100px">1-6</th>
                    <th style="width: 100px">1-7</th>
                    <th style="width: 100px">1-8</th>
                    <th style="width: 100px">1-9</th>
                    <th style="width: 100px">1-10</th>
                    <th style="width: 100px">1-11</th>
                    <th style="width: 100px">1-12</th>
                    <th style="width: 100px">1-13</th>
                    <th style="width: 100px">1-14</th>
                    <th style="width: 100px">1-15</th>
                    <th style="width: 100px">1-16</th>
                    <th style="width: 100px">1-17</th>
                    <th style="width: 100px">1-18</th>
                    <th style="width: 100px">1-19</th>
                    <th style="width: 50px">1-20</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                    <td><input type="checkbox" /></td>
                    <td>2-2</td>
                    <td>2-3</td>
                    <td>2-4</td>
                    <td>2-5</td>
                    <td>2-6</td>
                    <td>2-7</td>
                    <td>2-8</td>
                    <td>2-9</td>
                    <td>2-10</td>
                    <td>2-11</td>
                    <td>2-12</td>
                    <td>2-13</td>
                    <td>2-14</td>
                    <td>2-15</td>
                    <td>2-16</td>
                    <td>2-17</td>
                    <td>2-18</td>
                    <td>2-19</td>
                    <td>2-20</td>
            </tr>
            <!-- ...undsoweiterundsofort... -->
            <!-- ...Reihen drei bis neun... -->
            <tr>
                    <td><input type="checkbox" /></td>
                    <td>10-2</td>
                    <td>10-3</td>
                    <td>10-4</td>
                    <td>10-5</td>
                    <td>10-6</td>
                    <td>10-7</td>
                    <td>10-8</td>
                    <td>10-9</td>
                    <td>10-10</td>
                    <td>10-11</td>
                    <td>10-12</td>
                    <td>10-13</td>
                    <td>10-14</td>
                    <td>10-15</td>
                    <td>10-16</td>
                    <td>10-17</td>
                    <td>10-18</td>
                    <td>10-19</td>
                    <td>10-20</td>
            </tr>
            </tbody>
    </table>
</div>
</body>
</html>

Da die Tabelle sehr breit ist (1900px), kommt es im Container div auch wirklich zum overflow mit horizontaler Scrollbar. Alles wie erwartet. Zu Demozwecken habe ich in obigem Code-Beispiel den Container-Hintergrund eingefärbt. Ab jetzt beginnen die Merkwürdigkeiten (auf die Bilder klicken für Demo).

Checkboxen aktiviert - Container vergrößert
Aktiviert man eine der Checkboxen, so beginnt der Container sich nach unten auszudehnen. Pro aktivierter Checkbox nimmt die Größe zu, bis irgendwann eine „kritische Masse“, die z.B. am Ende des Fensters bzw. der IE9 Info-Box, erreicht wird und der Container wieder in sich zusammenfällt.

Das gleiche Phänomen lässt sich nachstellen, wenn man versucht die Tabellenzellen zu selektieren.

Zellen markiert - Container vergrößert

Wechselt man auf den Kompatibilitätsmodus bzw. springt auf IE8/IE7 um, so verändert sich das Verhalten hin zum erwarteten Ergebnis – einer scrollbaren Tabelle ohne Überraschungen.
Die Höhe des umgebenden Containers reagiert also auf die Aktivierung der Checkboxen und auf die Selektion der Tabellenzellen mit der Maus!

Dieses Phänomen veranlasste mich sogar dazu, in die Niederungen eines IE6-Tests hinabzusteigen, aber auch in diesem Oldie wird die Seite normal dargestellt. Es stellt sich also die Frage – a bug or a feature? Diese Frage kann mir wohl nur der „Erfinder“ selbst beantworten (Bug eingestellt!) …

Update

Obwohl man in diesem Beispiel nur einen horizontalen overflow hat, hilft der nachfolgende Workaround:

<div style="overflow: auto; ... ; height: 500px;">
...
</div>

Der Container bekommt eine explizite Höhenangabe (hier 500px), und damit verhält sich auch der IE9 richtig.

Informationen über den Autor

Henning

...ist ein User Interface und User Experience Designer. Nebenbei Frontend Developer für Web-, Desktop- und mobile Plattformen. Mit mehr als 10 Jahren professioneller Projekterfahrung schreibt er zu den Themen Webdesign, -trends und -programmierung – eben fullstack! Follow @kingfries