Anchoring trick isn't working in Firefox

This code has different result in Firefox and Chrom开发者_运维问答e

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

How to make the text box anchored 0px to the left and 20px to the right side of the div?

NOTE: div's width must fluid 50%.

Thank you :)

Get rid of left:0;

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

<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> behaves badly in some browsers, wrap it in a div

"How to make the text box anchored 20px to the right side of the div?" Either I don't get what you mean by this, or the example works perfectly fine.

http://jsfiddle.net/GmMCQ/

How about using box-sizing on the outer <div>? This way you can avoid adding an extra one:

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

Of course, this would only apply if you didn't mind adding the padding to the outer <div>...

Tested in FF 4.0 & Chrome 10.0