Абсолютно расположенный диапазон внутри кнопки css не отображается в IE7

Question

У меня возникла проблема с получением JS-анимации из 3 точек для работы в IE7. Похоже, это связано с проблемой с пролетом, которую не показывают 3 точки, из-за проблемы положения или, возможно, z-индекса. Я уже пробовал возиться с z-index и добавлять div вокруг моего диапазона, и они, похоже, не помогают в этом случае.

Промежуток, который ведет себя неправильно:

.dots {
  position: absolute;
  top: -3px;
  font-size: 40px; 
  line-height: 10px;   
}

это внутри:

.button {
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 16px;
  display: inline-block;
  background-clip: padding-box;
  border: 1px solid #6F4D38;
  font-weight: bold;
  text-transform: uppercase;
  margin: 9px 9px 10px 9px;
  padding: 3px 8px 3px 10px;
  border-radius: 22px;
  position: relative;
  -webkit-box-shadow: inset 0px 1px 4px #fff, 0 1px 0px 0px black;-moz-box-shadow:    inset 0px 1px 4px #fff, 0 1px 0px 0px #000;box-shadow:         inset 0px 1px 4px #fff, 0 1px 0px 0px black;
  letter-spacing: 3px;
  z-index: 1;
  overflow: none;
}

Код, над которым я работаю, находится по адресу http://jsfiddle.net/gYjEH/1/

Answer 1

http://jsfiddle.net/gYjEH/6/show/

Чтобы показать точки в IE7 line-height из span должен быть равен его font-sizeиначе вы увидите только верхнюю пустую часть диапазона (точки находятся в самом низу).