Firefox bouncy effect bug

Question

I have made small fiddle in here http://jsfiddle.net/DV6JA/4/

I don't understand firefox. Long time age IE was a problematic browser but right now there is many bugs in firefox.

Why in this example, <.txt> element jump on bottom. I try to change font size, but it sometimes help and sometimes doesn't. When i put some sorter text in <.cnt> it sometimes doesn't jump. So where is problem for firefox?

HTML:

<li class='tag_glass'>
     <a>
        <p class='cnt'>999+</p>
        <p class='txt'>some txt in here</p>
     </a>
</li>

CSS:

li a{
  display:inline-block;
}

.txt{
    float:left;
 }
.cnt{
  font-size:9px;
  float:left;
}

JS:

$('li a').mouseenter(function(){

    $(this).effect( "bounce",{times:3,distance:10},1000 );

});

Answer 1

If you can wrap the a tag with a div and apply the bounce effect on this div. I also added a width to the div and the p elements, I don't know if you can accept reducing their widths but take a look at it.

Here's the updated fiddle

Hope it helps...