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;）。

Answer 2

你总是可以使用一点IE黑客：

_padding-top:4px（例如）

如果你确实选择了IE浏览器根目录，这里是如何申请不同版本的IE：

• padding-top:4px\9; - IE8及以下
• *padding-top:4px; - IE7及以下
• _padding-top:4px; - IE6

的Al

Answer 3

请勿使用padding，而是使用line-height上的em（最好使用单位div）。 顺便说一下，我建议你甚至不要使用div s而是列表（ul宽度li）。

Answer 4

它们在IE中正确对齐。尝试在其中一个框中添加q，您就会看到我的意思。

您可以通过添加以下内容来“修复”此问题并获取Chrome的外观：line-height: 18px;。

Answer 5

这是因为Chrome和IE的默认值line-height具有不同的值。

将line-height设置为19px，它应在两个浏览器中垂直对齐