/Blog/Archiv 2007/IE-Button-Hölle

Navigation

Suche

In der IE-Button-Hölle

Und wieder ein Bug: Sowohl der Internet Explorer 6 als auch die Version 7 kommen mit dem "button"-tag nicht zurecht.

Der Internet Explorer, oder speziell seine CSS-Rendering-Engine, sind unter Webentwicklern ja schon lange Zeit berüchtigt. Normalerweise teste ich meine Website immer auf Cross-Browser-Kompatibilität und war mir bisher sicher, damit vor Überraschungen gefeit zu sein. Nun bin ich selbst in eine Falle getappt, die zunächst nicht optisch zu erkennen ist: die IE-Button-Hölle!

Der tag "button" existiert schon seit HTML 4.0 und bietet weitaus größere Gestaltungsmöglichkeiten als die konventionelle Variante mit "input". Mit "button" läßt sich ein Bereich definieren, der jedes HTML-Konstrukt aufnehmen kann, das dann als "button" interpretiert. So lassen sich beispielweise unter Verwendung von Grafiken schnell und einfach sehr ansehnliche Schaltflächen gestalten. So habe ich mich dann auch dieser Technik bedient, als es darum ging, eine Tabelle mit Manipulationsmöglichkeiten (Editieren, Löschen) für jeden Eintrag auszugeben, wie man es von phpMyAdmin kennt. Während dort die GET-Methode verwendet wird, wollte ich POST nutzen. Ein weiterer Vorteil ist hier, dass man die ID des spezifischen Eintrags direkt im Value-Attribut einbetten kann und dadurch eine sehr elegante Verarbeitung erreicht. Das sah im Quellcode dann beispielsweise so aus:

<form method="post">
<table>
   <tr>
      <td>Datensatz 1</td>
      <td>
         <button type="submit" name="edit" value="1"><img src="edit.png"/></button>
         <button type="submit" name="delete" value="1"><img src="delete.png"/></button>
      </td>
   </tr>
   <tr>
      <td>Datensatz 2</td>
      <td>
         <button type="submit" name="edit" value="2"><img src="edit.png"/></button>
         <button type="submit" name="delete" value="2"><img src="delete.png"/></button>
      </td>
   </tr>
</table>
</form>

Die fertige Anwendung lief im Firefox einwandfrei, und auch mit dem IE schien es zunächst keine Probleme zu geben. Aber dann häufte sich bei verschiedenen Vorgängen das Fehlverhalten. Also warf ich mal einen Blick in meine PHP-Arrays, um zu sehen, was da eigentlich so übertragen wird ... und bekam beim IE das kalte Grausen. Firefox versendet wie im Standard vorgesehen den Inhalt des Value-Attributs des Buttons, der angeklickt wurde. Per PHP kann man die Aktion und die ID des betreffenden Datensatzes einfach über das $_POST-array ermittteln. Der Internet Explorer 7 allerdings hält sich auch hier mal wieder nicht an den Standard. Er versendet den gesamten Inhalt(!) des button-tags als Wert für das Value-Attribut! Würde man also im obigen Beispiel auf den Delete-Button der zweiten Zeile drücken, bekäme man je nach Browser unterschiedliche Werte:

print $_POST['delete'];

Ergebnis mit Internet Explorer 7: '<img src="delete.png"/>'
Ergebnis mit Firefox: '2'

Meine Recherche im Internet (s.u.) bestätigte das festgestellte Verhalten. Doch es kommt noch besser: Der Internet Explorer in der Version 6 zeigt nicht nur das beschriebene Verhalten, sondern versendet beim Klick auf einen beliebigen Button die Inhalte jeden Buttons im gesamten Formular. Es ist dort noch nicht einmal festzustellen, welcher Button gedrückt wurde! Damit kann der button-tag de-facto in der heutigen Internet-Landschaft nicht eingesetzt werden ... dank Microsoft und seinem verdammten Browser-Versuch.

Weitere Kommentare zum Thema: