IE and Chrome calculating CSS padding differently

Question

I have the following CSS and HTML:

    .TestPadding{
width:29px;
text-align:center;
height:18px;
padding:3px 0px 2px 0px;
margin:2px 1px;
font-family:Trebuchet MS;
font-weight:bold;
font-size:13px;
border:2px solid black;
float:left;}

<div class="TestPadding">1</div>
<div class="TestPadding">2</div>
<div class="TestPadding">3</div>
<div class="TestPadding">4</div>
<div class="TestPadding">5</div>
<div class="TestPadding">6</div>
<div class="TestPadding">7</div>
<div class="TestPadding">8</div>
<div class="TestPadding">9</div>
<div class="TestPadding">10</div>

The problem is that the rendering is different in IE and Chrome. Here's what it looks like:

Chrome is on top and IE on the bottom. On IE, the numbers don't look vertically aligned. I tried making all sorts of combinations on the CSS but none have given me a consistent vertical alignment and sizing.

If you want to try it out, there's a **fiddle here.**

Thanks.

Answer 1

Try using line-height:18px; and no vertical padding (padding:0 2px;).