firefox绝对定位问题

Question

我在Firefox中正确渲染这个问题.它在铬和野生动物园中呈现出色.

<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渲染:

编辑: 实例(正确渲染)

Answer 1

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

如果你真的必须这样做,有一些黑客使用css3 box-sizing属性和/或手动调整属性,如行高和字体大小和填充,以使所有浏览器同意输入大小,但这比听起来更难.

这个问题有一些信息box-sizing并使用百分比/自动宽度来获得一致性:输入显示:块不是一个块,为什么不呢？

编辑:根据您上面的评论,您可能需要设置一些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在表单输入的填充和边界计算中不太容易受到浏览器差异的影响.