Missing top and bottom border in IE7

I have a problem with border in IE7. For some reason the border shows only from the left and the right side:

开发者_StackOverflow中文版

IE7, renders incorectly:

FF, renders correctly:

Using this CSS:

.tags a {
  background:#fff;
  border:1px solid #D8DFEA;
  padding:5px;
  margin-left:5px;
  color:#3B5998;
  font-size:14px;
}

What am I doing wrong?

---

Most likely the borders are clipped by the height of the .tags container. The css for .tags a itself looks OK.

Note that since <a> is an inline element you can't set it's height (unless you set it to display:block). The height difference is most likely caused by the fonts being rendered differently by different browsers. Also watch out for Safari which tends to render fonts fatter (taking up more pixels) than all other browsers.

---

I just had the same problem in IE. I think this was cause by me setting the font-size within this div.

I set the line-height to match my font-size, and this works in IE, FF, Chrome, Opera, Safari - yeah!

---

Helena's solution worked for me too, but to clarify, I had to set the line-height of the surrounding <div> to be a slightly bigger than the font size of the <a>.

So something like this:

<div style="line-height:40px">
    <a style="font: 14px/36px Arial; ....">
</div>