javascript - 在 IE7 中不显示的 css 按钮内的绝对定位跨度

Question

我在使 3 个点的 js 动画在 IE7 中显示时遇到问题。这似乎与 3 个点由于位置问题或 z-index 问题而未显示的跨度问题有关。我已经尝试过弄乱 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 中显示点，span 的 line-height 应该等于它的 font-size，否则你只会看到跨度的顶部空白部分(点在最底部)。