我该如何解决这个CSS异常？

Question

我认为这是一些非常基本的CSS，它在FF4和IE8中表现不同。

有问题的CSS是这样的：

  div.showme  {
     border: 1px dotted blue;
     position: absolute;
     top :10px;
     bottom :10px;
     left: 1%;
     right: 33%;
     overflow: auto;
     padding: 0.8em 1em 0.8em 1em;
     line-height:1.75em;
  }

  div.showme a {
     padding: 0em 5px 0em 5px;
     margin: 0;
     white-space: nowrap;
     color: #FF00FF;
     background-color:#E6E6FA;
     border: 1px solid grey;
     padding: 0em 4px 0em 4px; }

  div.showme a:link       { color: blue; }
  div.showme a:visited    { color: #1E90FF; }
  div.showme a:active     { color: red; }

相关的HTML如下所示：

<div class='showme'>
  <a href='one'>one</a>
  <a href='two'>two</a>
   ...
</div>

问题是，在IE8中，填充不会始终显示。

在Firefox中，它可以像我期望的那样工作。

工作实例：
http://jsbin.com/ogosa4

使用上面的工作演示，如果你调整窗口的大小，你会看到div中每行上“leading”元素的填充，从零变为非零。

我该如何解决这个问题？

Answer 1

如果您向display: inline-block;添加div.showme a {}，也会在IE中应用填充，但它会对行高产生一些影响，您可能需要指定其他边距

Answer 2

我也在Opera中看到过这种行为。填充物到达上面一行。如果链接中有多个单词，请尝试display: inline-block和white-space:nowrap

您可以安全地使用IE7中的inline-block内联标记。