CSS image replacement with font-size

Yesterday I was writing my Firefox download counter. I wanted to do image replacement with CSS, without using complicated markup. My idea was to set the font-size to zero, and the padding to the half of the dimension of the image.

However, it turned out that only the Gecko renders what I intended. For Opera and IE, they both can't make the text of size zero to "invisible". Hence I was forced to use the uglier method.

Take a look of my code below. Are there something wrong? Or is my understanding of font-size wrong? :-S

Get Firefox