CSS，Javascript功能问题与新浏览器上的样式输入按钮有关?(即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();

以及样式化按钮的CSS

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

此外，我注意到这里提出了一个非常类似的问题：为什么鼠标点击不总是适用于样式化的输入按钮？

到目前为止，我能找到的另一件事。在IE 9的开发工具中，如果我将文档模式切换到除IE 8或9之外的任何其他模式，按钮就会正常工作。因此，我的一条思路是将X-UA-设置为兼容IE7，看看这是否能解决问题，因为显然，IE中的文档模式就是这样工作的：IE8浏览器模式与文档模式

问题：在FF（早期版本<9.0）IE 7中测试后，我注意到按钮正常工作。但在FF 9、Chrome 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.