Отсутствует верхняя и нижняя граница в IE7

Question

У меня проблема с границей в IE7.По какой-то причине граница отображается только с левой и правой стороны:

IE7, рендерится неправильно:

FF, рендерингправильно:

Использование этого CSS:

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

Что я делаю не так?

Answer 1

Скорее всего границы обрезаются по высоте контейнера .tags.Сам css для .tags a выглядит нормально.

Обратите внимание, что, поскольку <a> является встроенным элементом, вы не можете установить его высоту (если вы не установите его на display:block).Разница в высоте, скорее всего, вызвана тем, что шрифты по-разному отображаются разными браузерами.Также обратите внимание на Safari, который делает шрифты толще (занимая больше пикселей), чем все другие браузеры.

Answer 2

У меня просто была такая же проблема в IE. Я думаю, что это было причиной того, что я установил размер шрифта в этом div.

Я установил высоту строки в соответствии с размером шрифта, и это работает в IE, FF, Chrome, Opera, Safari - да!

Answer 3

Решение Хелены работало и для меня, но, чтобы уточнить, я должен был установить line-height окружающего <div> немного больше, чем размер шрифта <a>.

Так что-то вроде этого:

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