Question

我遇到一个问题，我的js动画的3个点似乎在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/

要显示line-height的IE7 span中的点应该等于其font-size，否则您只会看到跨度的顶部空白部分（点位于最底部））。

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

1 个答案: