How can I workaround this CSS anomaly?

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.co开发者_StackOverflow中文版m/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?

---

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

---

I have seen this behaviour in Opera too. The padding goes to the upper line. Try display: inline-block and white-space:nowrap if you have more than one word in the link...

You can safely use inline-block in IE7 with inline tags.