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

Кроме того, я заметил очень похожий вопрос, заданный здесь: Почему щелчки мыши не всегда работают для стилизованных кнопок ввода?

Еще одна часть того, что я смог узнать до сих пор.В инструментах разработчика IE 9, если я переключаю режим документа на что-либо, кроме IE 8 или 9, кнопка ведет себя как следует.Поэтому у меня есть одна мысль: установить X-UA-Compatible на IE 7 и посмотреть, разрешает ли это, как, по-видимому, так работает режим документа в IE: режим браузера IE8 против режима документа

Вопрос : После тестирования в FF (более ранние версии <9.0), IE 7, я заметил, что кнопка работает как надо.Но в FF 9, Chrome 16, IE 8/9 он ведет себя так, как описано выше.Кто-нибудь сталкивался с подобной проблемой и каким-либо советом о том, что я должен остерегаться? </p>

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.