IE7的标签浮起的左bug

Question

HTML

 <a href="#">M1</a>
 <a href="#">M2</a>
 <a href="#">M3</a>
 <a href="#" class="front">FirstONE</a>

CSS

a.front{float:left;}

ONLINE SAMPLE: http://jsbin.com/anirot/2

the other browsers are fine just IE7 , looks front class cannot display at the front. Is there any tricks could get it fixed? I've try display inline or block, doesnt help at all. even *display:inline, zoom:1

Thanks

Answer 1

Put front link in HTML before other three ones. If you need exact HTML structure you've shown, move the element to corresponding position in HTML via JavaScript for IE7 only.