新しいブラウザのスタイル付き入力ボタンに関するCSS、Javascript機能の問題？ （IE 8/9、FF 9）

Question

フォームの一部である入力ボタン（CSSを使用したスタイル）があるサイトで作業しています。たとえば、サンプルコード

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

は下記を参照してください 私は、ユーザーがボタンをクリックした場合、それは下のいくつかのピクセルを移動させ、問題を発見し、その後、アクションが行わ断続を取ると予想しました。しかし、が間欠的にになると、時にはそれが動作し（ユーザーを次のページにリダイレクトする）、何も起こらないことがあります。

これまで作業していた開発者は、コードを詳しく記述していないため、ここから最初から作業しようとしています（詳細は不足しています）。とにかく、コードをテストした後、新しいブラウザがCSSとJavaScriptをどのようにレンダリングしているかという問題があるようです。ここで

がボタンの機能の背後にあるのJavaScriptの抜粋です：

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

とスタイルボタンも

.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; 
} 

CSS、私は非常によく似た質問がここに尋ね気づい：Why do mouse clicks not always work for styled input buttons?

私が今までに見つけたことのもう一つの部分。 IE 9のデベロッパーツールで、ドキュメントモードをIE 8または9以外に切り替えると、ボタンは正常に動作します。 IE8 browser mode vs document mode

質問を：でテストの後だから私は持っている思考の1行は、IE 7にX-UA-の互換性を設定すると、どうやら、それはIEのドキュメントモードがどのように動作するかだとそれはそれを解決するかどうかを確認することですFF（以前のバージョン< 9.0）、IE 7、私はボタンが正常に動作することに気づいた。しかし、FF 9では、クロム16、IE 8/9、それは上記のように動作します。 誰もが似たような問題に遭遇し、私が何を監視しなければならないかに関するアドバイスをしていますか？

Answer 1

簡単修正：

まず、使用しないでください。

<input type="button" /> 

使用

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

、スクリプトで：

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