Question

我试图将<button>向右浮动。 <button>位于<form>之外但位于同一行。出于某种原因，这不适用于FF。我将表单背景设为红色，发现<button>仍然在FF的<form>中，即使它不是！每个其他浏览器都可以正常工作，<button>不在<form>。

屏幕截图:(左边是chrome ...一个是http：//，右边是Firefox

alt text http://img375.imageshack.us/img375/3824/ffchrome.png

HTML：

<form>
  <input type="url" placeholder="http://" />
  <input type="submit" value="Crypt" />
</form>
  <button type="button"> ? </button>

CSS :(拿出不必要的代码）

section.crypter {
  padding: 25px;  
  }
section.crypter form {
  display: block;
  float: left;
  background: red;
}
/* Input */
section.crypter input[type="url"] {
  border:1px solid #666;
  color: #939393;
  font: italic bold 1.7em Verdana, Arial, Serif;
  outline: 0;
  padding: 10px 10px;
  width: 240px;
  }
section.crypter input[type="submit"] {
  border:1px solid #666;
  color: #000;
  font: 2em Verdana, Arial, Serif;
  margin:0 0 0 -10px;
  padding: 8px 20px;
  }

section.crypter input[type="submit"]::-moz-focus-inner {
  border: 0;/* Firefox hack */
  }
section.crypter button {
  display: block;
  float: right;
  padding: 10px 25px;
  }

Answer 1

我用firefox 3.6.8尝试了你的代码并且没有你遇到的问题。我也不认为Firefox会操纵DOM（将按钮移动到表单标签中），会发生什么样的接缝。

所以我猜它是你的一个Firefox扩展，导致问题。

Answer 2

尝试卸载并安装firefox以及旧的时尚重启可能是值得的。

Answer 3

嘿伙计们，我想通过Kroc Camen来解决这个问题。在Firefox中，我不能向右移动某些内容，除非它首先在包装元素中按顺序排列。（自90年代以来的引擎怪癖）哈哈，谢谢你的帮助！

Firefox在这种形式上表现得很奇怪

3 个答案: