DOCTYPE влияет на отображение высоты строки -

Это головная боль.

Я создал закомментированный jsFiddle, чтобы продемонстрировать феномен, с которым я недавно столкнулся при использовании платформы Twitter Bootstrap для создания некоторых выпадающих кнопок.

http://jsfiddle.net/jackwanders/WKvPv/

По сути, при использовании HTML5, HTML 4 Strict или XHTML Strict DOCTYPE кнопка отображается так, как задумано. Однако при использовании HTML4 или XHTML Transitional DOCTYPE кнопка вставки отображается с меньшей высотой. Вот соответствующий CSS от Bootstrap для<span class="caret">(я удалил стили, которые не имеют значения, такие как цвета и градиенты):

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}

.btn.caret {
  margin-top: 7px;
  margin-left: 0;
}

.btn {
  display: inline-block;
  *display: inline;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  *margin-left:.3em;
  line-height: 18px;
  *line-height: 20px;
  text-align: center;
  vertical-align: middle;
}

Почему DOCTYPE влияет на высоту кнопки? Если для line-heightустановлено значение 18 пикселей, почему высота будет меньше 18 пикселей?

PS -Да, я знаю, что Bootstrap требует HTML5, но я полагаю, что это относится к используемым функциям HTML5, а не к тому, как DOCTYPE отображает стили CSS