css - IE 和 Chrome 计算 CSS 填充的方式不同

Question

我有以下 CSS 和 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>

问题是在 IE 和 Chrome 中呈现不同。这是它的样子:

Chrome 在上，IE 在下。在 IE 上，数字看起来不是垂直对齐的。我尝试在 CSS 上进行各种组合，但没有一个能给我一致的垂直对齐和大小调整。

如果您想尝试一下，这里有一个 **fiddle here . **

谢谢。

Answer 1

尝试使用 line-height:18px; 并且没有垂直填充 (padding:0 2px;)。