Css firefox绝对定位问题

我在firefox中无法正确呈现此内容。它在chrome和safari中呈现得很好

<div style="" id="login_inline">
    <form accept-charset="utf-8" action="/users/login" method="post" id="UserLoginForm">
    <div style="display:none;">
        <input type="hidden" value="POST" name="_method">
    </div>
    <input type="text" id="UserDummyEmail" tabindex="1" value="Email" name="data[User][dummyEmail]" style="display: block;">
    <input type="text" id="UserDummyPassword" tabindex="2" value="Password" name="data[User][dummyPassword]" style="display: block;">
    <input type="text" id="UserEmail" maxlength="255" tabindex="3" name="data[User][email]">
    <input type="password" id="UserPassword" tabindex="4" name="data[User][password]">
    <div class="submit">
        <input type="submit" value="Login">
    </div>
    </form>
</div>

Firefox渲染：

Chrome渲染：

---

编辑：

通过定位绝对值，您将依赖于输入元素的正确宽度。跨浏览器很难做到这一点，因为浏览器倾向于使用样式不一致的自定义或本机元素。最好使用处理宽度不一致的内联块或浮动布局

如果你真的必须这样做，有一些黑客使用css3

box size

property和/或手动调整行高、字体大小和填充等属性，以使所有浏览器都同意输入大小，但这比听起来更难

此问题提供了有关

框大小调整

和使用百分比/自动宽度获得一致性的一些信息：

编辑：根据上面的评论，您可能需要设置一些div包装器来设置隐藏和可见元素的大小/位置，然后使用百分比宽度和

框大小，如前所述

<div class="input_wrapper" style="width:100px;position:relative">
    <input style="width:100%;box-sizing:border-box;position:absolute">
    <div class="fake_input" style="width:100%;position:absolute">
</div>



这一切的关键在于
框大小：边框框
不太容易受到浏览器对表单输入的填充和边框计算差异的影响。
我发现，通常在输入字段上设置字体大小是很好的，这将使它们的大小（更）一致
是否有任何理由为此布局使用位置？是的，我需要在password字段顶部设置伪密码字段，在user字段顶部设置伪用户字段。对我来说很好。我用的是FF3.6是的。伟大的修复+1谢谢。下面是一个示例，适用于那些希望做类似事情但却漂浮在文本区域上方的人。
<div class="input_wrapper" style="width:100px;position:relative">
    <input style="width:100%;box-sizing:border-box;position:absolute">
    <div class="fake_input" style="width:100%;position:absolute">
</div>