JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Gecko positioning bug with padded fieldset parent</h1>
<p>The following issue occurs in FF3.6 & FF4. Opera 11, Chrome 9. Safari 5, IE8/9 all render the three buttons in the correct position.</p>

<form method="get" action="#">
    <fieldset class="parent">
        <h2>Broken</h2>
        <p class="content">Padding on the fieldset parent and absolute positioning on the child cause this issue. A div parent or removing the padding fix it.</p>
        <a class="child" href="#">Button</a>
    </fieldset>
</form>


<form method="get" action="#">
    <fieldset class="parent nopadding">
        <h2>Working with no parent padding</h2>
        <p class="content">Removed padding.</p>
        <a class="child" href="#">Button</a>
    </fieldset>
</form>


<form method="get" action="#">
     <div class="parent">
        <h2>Workling with div parent</h2>
         <p class="content">Removed padding.</p>
         <a class="child" href="#">Button</a>
     </div>
 </form>

CSS

.parent{border: 1px solid #333;margin:12px;padding:12px;position:relative;min-height:60px;}
.content{width:80%;}
.child{position:absolute;right:12px;bottom:12px;padding:3px;background:green;color:#FFF;}


.child2{float:right;position:absolute;right:12px;bottom:12px;padding:3px;background:green;color:#FFF;}


h1{font-weight:bold;}
.nopadding{padding:0;}