火狐浏览器绝对定位问题

Question

我在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>

CSS：

#login_inline {
position:absolute;
right:10px;
top:30px;
width:420px;
}

.submit {
display:inline;
position:absolute;
left:360px;
}

#UserPassword {
position:absolute;
left: 185px;
}

#UserDummyPassword {
position:absolute;
left:185px;
z-index:1;
color:gray;
}

#UserDummyEmail {
position:absolute;
left:10px;
z-index:1;
color:gray;
}

#UserEmail {
position:absolute;
left:10px;
}

Firefox渲染：

Chrome渲染：

编辑：实时示例（正确渲染）

- AlexBrand

---

使用位置布局的原因是什么？ - Mahima

是的，我需要在密码字段上方放置虚拟密码字段，并在用户字段上方放置虚拟用户字段。 - AlexBrand

我刚在Firefox和Chrome中检查了你的jsfiddle，对我来说一切都很好。我正在使用FF3.6。 - Mahima

Answer 1

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

如果您真的必须这样做，可以使用 CSS3 的 box-sizing 属性和/或手动调整属性，如行高、字体大小和填充，以使所有浏览器都同意输入大小，但这比听起来要困难得多。

此问题提供了有关 box-sizing 和使用百分比/自动宽度实现一致性的信息：input with display:block is not a block, why not? 编辑：根据您上面的评论，您可能需要设置一些 div 包装器来设置隐藏和可见元素的大小/位置，然后使用百分比宽度和 box-sizing 进行说明。

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

关键在于 box-sizing:border-box 对于表单输入框中的填充和边框计算的浏览器差异影响更小。

- SpliFF

---

没错。很好的修复 +1 谢谢。这里有一个示例，供那些想要做类似事情但是浮动在文本区域上方的人参考。 http://jsfiddle.net/f4RQn/ - B-Money

Answer 2

我发现在输入字段上设置字体大小通常是有好处的，这将使它们的大小（更）一致。

- Miia Klingstedt