CSS, Javascript Funktionalität Problem in Bezug auf gestylte Eingabeknöpfe auf neueren Browsern? (IE 8/9, FF 9)

Question

Ich arbeite an einer Website, auf der ich Eingabeschaltflächen (mit CSS gestylt) habe, die Teil eines Formulars sind. Zum Beispiel, siehe unten für Beispielcode

<input type="submit" name="buttonSave" value="save" id="buttonsavejs" class="button_image button_style"/>

Ich habe gerade ein Problem gefunden, wo, wenn ein Benutzer auf die Schaltfläche klickt, bewegt es ein paar Pixel unten und dann erwartete Aktion stattfindet mit Unterbrechungen . Aber intermittierend Ich meine, dass es manchmal funktioniert (der Benutzer wird auf die nächste Seite weitergeleitet) und manchmal passiert nichts.

Der Entwickler, der früher daran gearbeitet hat, hat seinen Code kaum dokumentiert, so dass ich versuche, hier von Grund auf neu zu arbeiten (entschuldigen Sie also den Mangel an Details). Wie auch immer, nach dem Testen des Codes, scheint es, dass das Problem liegt mit, wie neuere Browser die CSS und Javascript gerendert werden.

Hier ist ein Ausschnitt aus dem Javascript, das der Funktionalität der Schaltfläche zugrunde liegt:

$("#buttonsavejs").click(function(){
        $("#main").unbind("submit").submit();

Und das CSS, das die Schaltfläche gestaltet

.button_style {
  height:28px;
  margin-left:10px;
  position:relative;
  right:10px;
  top:-23px;
  width:100px;
}

.button_image {
  background-image:url(http://some_image);
  border-bottom-width:0;
  border-color:initial;
  border-image:initial;
  border-left-width:0;
  border-right-width:0;
  border-style:initial;
  border-top-width:0;
  display:block;
  font-size:1px;
  line-height:1px;
  outline-color:initial;
  outline-style:none;
  outline-width:initial;
  overflow-x:hidden;
  overflow-y:hidden;
  position:relative;
  text-indent:-9999px;
}

Außerdem habe ich festgestellt, dass hier eine sehr ähnliche Frage gestellt wurde: Warum funktionieren Mausklicks bei gestalteten Eingabetasten nicht immer?

Ein weiterer Teil dessen, was ich bis jetzt herausfinden konnte. Wenn ich in den Entwicklertools des IE 9 den Dokumentmodus auf etwas anderes als IE 8 oder 9 umstelle, verhält sich die Schaltfläche wie gewünscht. Eine Möglichkeit, die ich habe, ist also, die X-UA-Compatible auf IE 7 zu setzen und zu sehen, ob das das Problem löst, da der Dokumentenmodus im IE offenbar so funktioniert: IE8-Browsermodus vs. Dokumentenmodus

Question : Nach dem Testen in FF (frühere Versionen < 9.0), IE 7, habe ich festgestellt, dass die Schaltfläche funktioniert, wie sie sollte. Aber in FF 9, Chrome 16, IE 8/9 verhält sie sich wie oben beschrieben. Ist jemand auf ein ähnliches Problem gestoßen und hat einen Rat, worauf ich achten sollte?

Answer 1

Einfache Lösung:

erstens, verwenden Sie nicht :

<input type="button" />

utiliser

<button type="button">bla bla bla</button> // you can use type="submit"

und in Schriftform:

$("#buttonsavejs").click(function(e){
    e.preventDefault(); // this stops the button from doing it's default action, aka submit.