Text in label position differently after zoom in IE7

I'm having a problem with IE7 after I zoomed the page. Some of the text was compressed and the hover/onClick was not in the place where that text is.

Here is my sample code and css:

CSS:

.p开发者_开发问答agination{background-color: #CCFFFF;padding:2px 2px 2px 2px;} 
.paginateNo{color: #000000;margin: 0 3px 0 3px;font-size: 10px; }   
.paginateYes{margin: 0 3px 0 3px;color: #0033FF;cursor:pointer; font-size: 10px;}   
.paginateYes:hover{color: #FF0000;text-decoration: underline;}

HTML:

<div  id="pagination" class="pagination" align="right">
    <label class="paginateNo">Records 1 - 20 of 150</label>
    <label class="paginateNo">First</label>
    <label class="paginateNo">|</label>
    <label class="paginateNo">Previous</label>
    <label class="paginateNo">|</label>
    <label class="paginateNo">1</label>
    <label class="paginateYes" onClick="showPage(?);">2</label>
    <label class="paginateYes" onClick="showPage(?);">etc...</label>
    <label class="paginateNo">|</label>
    <label class="paginateYes" onClick="showPage(?);">Next</label>
    <label class="paginateNo">|</label>
    <label class="paginateYes" onClick="showPage(?);">Last</label>
</div>

Note: ? means page number

I'm not sure if some of my CSS causing this, but in ff and chrome I had no problem. Is this IE7 problem or just in my code. I'll appreciate any help. Thanks

use IE Conditional CSS or study about conditional css

note: using above trick, your site will not be validated by w3c

A test with version of IE and browser may proof that this is a browser bugs. I also do some experiment with label to see what its different with my current display and its only prove that this a browser behavior.