CSS，JavaScript功能问题与更新的浏览器上的样式输入按钮相关？ （IE 8/9，FF 9） [英] CSS, Javascript functionality issue relating to styled input buttons on newer browsers? (IE 8/9, FF 9)

问题描述

我正在一个网站上，我有一个表单的一部分的输入按钮（使用CSS样式）。
例如，请参见下面的示例代码

I'm working on a site where I have input buttons (styled using CSS) that are a part of a form. For example, see below for sample code

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

我刚刚发现一个问题，如果用户点击按钮，它移动几个像素然后预期间歇地发生 。但间歇，我的意思是有时它的工作原理（重定向用户到下一页），有时没有发生。

I've just found an issue where if a user clicks on the button, it moves a few pixels below and then expected action takes place intermittently. But intermittent, I mean that sometimes it works (redirects the user to the next page) and sometimes nothing happens.

这以前没有记录他的代码太多，所以我想从头开始工作（所以请原谅缺乏细节）。无论如何，测试代码后，似乎问题在于更新的浏览器如何渲染css和javascript。

The developer who worked on this previously hasn't documented his code much, so I'm trying to work from scratch here (so excuse the lack of details). Anyway, after testing the code, it appears that the issue lies with how newer browsers are rendering the css and javascript.

这里是一个JavaScript按钮功能的代码片段：

Here's a snippet of the javascript behind the button's functionality:

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

>

And the CSS that styles the button

.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浏览器模式与文档模式

Another piece of what I've been able to find out so far. In IE 9's developer tools, if I switch the Document Mode to anything other than IE 8 or 9, the button behaves as it should. So one line of thinking I have is to set the X-UA-Compatible to IE 7 and see if that resolves it as, apparently, that's how the document mode in IE works: IE8 browser mode vs document mode

问题：在FF（早期版本< 9.0），IE 7测试后，我注意到按钮的工作原理。但在FF 9，Chrome 16，IE 8/9，它的行为如上所述。
任何人遇到类似的问题和任何建议我应该注意什么？

Question: After testing in FF (earlier versions < 9.0), IE 7, I noticed that the button works as it should. But in FF 9, Chrome 16, IE 8/9, it behaves as described above. Has anyone run into a similar problem and any advice on what I should be watching out for?

推荐答案

：

请勿使用：

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

这篇关于CSS，JavaScript功能问题与更新的浏览器上的样式输入按钮相关？ （IE 8/9，FF 9）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！