Firefox 4 - 意外分层？答案

【问题标题】：Firefox 4 - unintended layering?Firefox 4 - 意外分层？
【发布时间】：2011-04-17 20:18:22
【问题描述】：

我刚刚切换到 Firefox 4 并查看了我目前正在开发的网站。当我进入我的注册页面时，提交按钮位于其后的页脚 div 下方。我不太确定我在哪里出错了，它以前在所有浏览器中都有效。这是有问题的页面，底部的注册按钮是分层的：http://evo.writers-bbs.com/register.php

这是快速代码：

<div id="registerBox">
    <br /><br />
    <div id="leftRegister">
        <?php $startSpan = "<span style=\"color:red;\">";
              if ($session->getNumErrors(1) > 0) echo $startSpan; ?>Username:</span><br /><br /><br />
        <?php if ($session->getNumErrors(2) > 0) echo $startSpan; ?>Password:</span><br /><br /><br />
        <?php if ($session->getNumErrors(3) > 0) echo $startSpan; ?>Verify Password:</span><br /><br /><br />
        <?php if ($session->getNumErrors(4) > 0) echo $startSpan; ?>Email Address:</span>
    </div>
    <form method="post" action="tinUser_processor.php">
    <div id="rightRegister">
            <input type="text" name="username" class="registerInputs" /><br /><br /><br />
            <input type="password" name="password" class="registerInputs" /><br /><br /><br />
            <input type="password" name="verifyPassword" class="registerInputs" /><br /><br /><br />
            <input type="text" name="email" class="registerInputs" /><br /><br />
            <input type="hidden" name="processType" value="register" /><br />
    </div>
    <div style="text-align:center;clear:both;">
            <input type="submit" value="Register" class="loginButton" style="width:75px;" />
    </div>
    </form>
</div>

以及随之而来的 CSS：

#registerBox {
  width: 365px;
  height: 350px;
  background-color: #2e76ff;
  border: 3px solid #000000;
  margin: 0px auto;
}
#leftRegister {
  width: 142px;
  float: left;
  text-align: right;
  margin-right: 25px;
  color: #FFFFFF;
}
#rightRegister {
  width: 158px;
  float: left;
}

【问题讨论】：

你知道 FF 4 有很多问题吗？我怀疑这根本不是你的错，而是与升级有关。您可能想在一个月左右忘记 FF 4 并回退到 3.6.16。
@Pete, @linus：我在 Firefox 4 final 中没有看到问题，也许您使用的是旧的 beta 版本？
不，实际上我根据下面 Husar 的回答进行了修复，我只是还没来得及将其标记为正确答案。 CSS 重置最终起作用了 - 我曾计划解决它，但从未这样做：S

标签： html css firefox4

【解决方案1】：

它在 IE9 中也被破坏了。但据我所见，我认为问题出在您的代码上，而不是浏览器上。首先尝试给它一个 CSS 重置表（你可以在这里找到一个 => http://meyerweb.com/eric/tools/css/reset/。把你所有的输入都放在一个 formfeild 标记中。不要在 XTML 标记中混合 CSS 9 就像你在有问题的按钮上所做的那样；）） .如果有一些风格上的不便，请稍微调整一下你的 CSS。我认为您应该遵循这些步骤。

【讨论】：