锚定技巧在Firefox中不起作用

Question

此代码在Firefox和Chrome中有不同的结果

<div style="border:1px solid red; width:50%; height:50px; position:relative;">
    <input type="text" style="position:absolute; left:0; right:20px;" />
</div>

如何使文本框在div左侧固定0px，在div的右侧固定20px？

注意：div的宽度必须为50％。

谢谢：）

Answer 1

摆脱left:0;

<div style="border:1px solid red; width:50%; height:50px; position:relative;">
    <input type="text" style="position:absolute; right:20px;" />
</div>

Answer 2

“如何将文本框固定在div的右侧20px？”要么我得到你的意思，要么这个例子完全正常。

http://jsfiddle.net/GmMCQ/

Answer 3

<div style="border:1px solid red; width:50%; height:50px; position:relative;">
    <div style="position:absolute; left:0; right:20px;">
        <input type="text" style="width: 100%" />
    </div>
</div>

<input>在某些浏览器中表现不佳，将其包装在div

中

Answer 4

如何在外部<div>上使用框大小调整？这样您就可以避免添加额外的一个：

<div style="border:1px solid red; width:50%; height:50px; position:relative; padding-right:20px; box-sizing:border-box;">
    <input type="text" style="width:100%;" />
</div>

当然，这只适用于您不介意将填充添加到外部<div> ...

在FF 4.0中测试＆amp; Chrome 10.0