position incompatibility with float - html

Question

Position absolute seems to be working different in Firefox and chrome when using float: left.
Chrome:
Firefox:
.ulfloat{
text-decoration: none;
}
.ulfloat li{
float: left;
}
.g-blue{
background-color: blue;
}
.g-red{
background-color: red;
position: absolute;
}
<div>
<ul class="ulfloat">
<li>
<a>
<i class="g-blue">as</i>
<span class="g-red">bs</span>
</a>
</li>
</ul>
</div>
Using:
Ubuntu 14.04.1 LTS
Google Chrome 39
Firefox v34
This is the structure I'm using to create a notification badge and because of this issue my notification looks the following way:
Chrome:
Firefox ( this is the behaviour I want ):
how can I fix it to ensure compatibility between browsers?
Which is the correct behaviour ?

Answer 1

You need to set left / right or top/ bottom that is the main reason we use position: absolute
absolute Do not leave space for the element. Instead, position it at a
specified position relative to its closest positioned ancestor or to
the containing block. Absolutely positioned boxes can have margins,
they do not collapse with any other margins.
Note:
You may want to add position: relative to the list element since you are using the position: absolute on his child.
Here is an alternative:(apply the float on i and span instead of li)
.ulfloat{
text-decoration: none;
}
.ulfloat i, .ulfloat span{
float: left;
}
.g-blue{
background-color: blue;
}
.g-red{
background-color: red;
position: absolute;
}
<div>
<ul class="ulfloat">
<li>
<a>
<i class="g-blue">as</i>
<span class="g-red">bs</span>
</a>
</li>
</ul>
</div>