The pixel on IE6 - css

Question

In my project,I use bootstrap and less. Although when I test the template, it look beautiful, but when test it using ieTest, I found something wrong.
The pictures are, from top to bottom, Chrome 22, IE9 and IE6:
I found all I can find, eg "three pixel jog", but I still can't solve it.
here is the html code:
<p class="top-tag">
<span class="floatbutton">
<
>
</span>
down
ask phone
time /
rate
<b>1,10</b>
</p>
here is the css:
p.top-tag {
margin-top: 25px;
font-size: 12px;
width: 100%;
a.down, a.ask-detail {
display: inline-block;
height: 25px;
text-align: center;
line-height: 25px;
border: 1px solid #dddddd;
color: #2f2725;
}
a.down { width: 44px;}
a.ask-detail {
width: 90px;
margin: 0 43px auto 20px;
}
b {
margin-left: 284px;
display: inline-block;
}
span.floatbutton {
float: right;
width: 39px;
//display: inline-block;
overflow: auto;
zoom: 1;
//for the IE6
//---
//_overflow: hidden; zoom: 1;
//---
height: 25px;
margin: 4px -3px auto 0;
a {
display: inline-block;
vertical-align: top;
width: 13px;
height: 13px;
border: 1px solid #ddd;
padding-left: 4px;
padding-bottom: 4px;
}
a.left-button {
float: left;
display: inline;
border-right-style: none;
*margin-top: 1px;
}
}
}
I use the bootstrap.css and css.less at the beginning of the template.
The question is why the pixel under the IE, they can't work. And the IE6 they can't display, and float far.
Thanks!