CSS firefox绝对定位问题

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5481756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:05:22  来源:igfitidea点击:

firefox absolute positioning problem

cssfirefoxgoogle-chromestylesheetcss-position

提问by AlexBrand

I am having trouble rendering this correctly in firefox. It renders nicely in chrome and in safari.

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

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

火狐渲染:

Firefox rendering

火狐渲染

Chrome rendering:

铬渲染:

enter image description here

在此处输入图片说明

EDIT:Live example (Correct rendering)

编辑:实时示例(正确渲染)

回答by SpliFF

By positioning absolute you become dependent on correct width of the input elements. This is difficult to do cross-browser because browsers tend to use custom or native elements that don't style consistently. You're better off with an inline-block or floated layout that handles inconsistent width.

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

If you really have to do it that way there are some hacks using css3 box-sizingproperty and/or manually tuning properties like line-height and font size and padding to get all browsers to agree on input sizing but that's harder than it sounds.

如果您真的必须这样做,那么有一些技巧可以使用 css3box-sizing属性和/或手动调整属性(如行高、字体大小和填充)来让所有浏览器就输入大小达成一致,但这比听起来要难。

This question has some info on box-sizingand using percentage/auto width to get consistency: input with display:block is not a block, why not?

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

EDIT: Based on your comment above you may need to set up some div wrappers to set the size/position of both the hidden and visible elements and then use percentage widths and box-sizingas explained.

编辑:根据您上面的评论,您可能需要设置一些 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>

The key to it all is that box-sizing:border-boxis less susceptible to browser differences in padding and border calculations on form inputs.

这一切的关键是box-sizing:border-box在表单输入的填充和边框计算方面不太容易受到浏览器差异的影响。

回答by Miia Klingstedt

I found it that usually it is good to put a font-size on input fields, this will make the size of them (more) consistent

我发现通常最好在输入字段上设置字体大小,这将使它们的大小(更)一致