Quelle pourrait être la cause de ce problème de rendu HTML/CSS dans Firefox ?

Question

Les styles :

h2 {
    color: #71D0FF;
    font-size: 11px;
    font-weight: bold;
    margin: 0px 0px 5px 0px;
}
a.box {
    color: #FFFFFF !important;
    cursor: pointer;
    display: block;
    padding: 10px;
    text-align: justify;
}
a.box:hover {
    background-color: #0C0C0C;
}
a.box span.down {
    display: block;
    color: #D04242;
    float: right;
    font-size: 11px;
    margin-left: 5px;
}
a.box span.up {
    display: block;
    color: #71D013;
    float: right;
    font-size: 11px;
}
span.noob {
    color: #FFA142;
}
span.pro {
    color: #A142A1;
}

Le HTML (il est répété pour chaque lien) :

<a href="stackoverflow.com/library/blaze" class="box">
<span class="down">-0</span>
<span class="up">+0</span>
<h2><span class="noob">NOOB</span> BLAZE</h2>
HAS CREATED 0 MAPS, WON 0 BATTLES, AND LOST 0 MAPS
</a>

Ce que je ne comprends pas, c'est pourquoi le rendu est parfois différent dans Firefox. Parfois, il s'affiche comme il est censé le faire et parfois, il s'affiche dans ce format bizarre, comme ici :

Je n'ai jamais eu ce genre de problème auparavant, quelqu'un en connaît-il la cause ? Est-ce que cela arrive à d'autres personnes ? Comme je l'ai déjà dit, il arrive que le site se charge très bien (avec exactement les mêmes codes HTML, CSS et autres) et parfois non. Cela semble aléatoire. Il se charge très bien dans IE, sans aucun problème bizarre.