Question

我有一个链接，它在悬停时有一个转换。

以下是jsfiddle示例：http://jsfiddle.net/Forresty/qc4rev6q/

将鼠标悬停在Chrome，Firefox或Opera中的链接上，您会看到它的行为符合预期。

但是，在Internet Explorer 11中，悬停边缘周围始终存在微小的间隙。对我来说完全是无稽之谈。这只是一个浏览器错误吗？或者我能做些什么来解决这个问题？

HTML

<a href="#" class="font_smooth btn btn_about">
  <span class="btn_text_onTop">LINK</span>
</a>

CSS

.btn {
  position: relative;
  display: inline-block;
  border: none;
  font-family: fira sans;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.125em;
  font-weight: 700;
}
.btn_about {
  color: #000;
  font-size: 0.8em;
  background: none;
  font-size: 1.5em;
  padding: 1.5em 3.5em;
  //display: inline-block;
  margin: 1.875em auto 0;
  transition: all 0.3s;
  border: 0.1875em solid #000;
  overflow: hidden;
}
.btn_text_onTop {
  position: relative;
  z-index: 2;
}
.btn_about:after {
  content:'';
  position: absolute;
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background: black;
  z-index: 1;
  transition: all 0.3s;
}
.btn_about:hover, .btn_about:active {
  color: white;
}
.btn_about:hover:after, .btn_about:active:after {
  width: 100%;
}

在我刚刚链接的示例中，悬停的右侧未被覆盖。但是，在实际站点上，它会根据填充的大小而变化。有时它是左，右和底，有时它是底部，在这种情况下，它是正确的。

非常感谢提前

Answer 1

那些似乎是差异化，来自0.1875em边框宽度... IE开发工具将计算值显示为4.32px - 只要我用CSS中的4px替换它，效果消失了。

因此，如果您可以使用绝对值，请使用一个，并且应该修复它。如果没有，至少尝试找到一个为不同字体大小提供“圆形”像素值的值。

Internet Explorer在链接中显示不需要的空间

HTML

CSS

1 个答案: