How can I workaround this CSS anomaly?

Question

I have what I think is some pretty basic css, and it behaves differently in FF4 and IE8.

The CSS in question is like this:

  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; }

The relevant HTML looks like this:

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

The problem is, the padding is not consistently displayed, in IE8.

In Firefox, it works as I would expect.

working example:
http://jsbin.com/ogosa4

Using the above working demonstration, if you resize the window you will see the padding on the "leading" element on each line within the div, change from zero to non-zero.

How can I fix this?

Answer 1

If you add display: inline-block; to your div.showme a {} the padding will be applied in IE also, but it has some impact with the line height and you may need to specify additional margin's