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();

用于设置按钮样式的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;
}

另外，我注意到一个非常类似的问题：Why do mouse clicks not always work for styled input buttons?

迄今为止我能够找到的另一件事。在IE 9的开发人员工具中，如果我将文档模式切换到IE 8或9以外的任何其他模式，则按钮的行为应该如此。所以我有一个想法就是将X-UA-Compatible设置为IE 7，看看是否能解决它，显然，这就是IE中文档模式的工作方式：IE8 browser mode vs document mode

问题：在使用FF（早期版本＆lt; 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.