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

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%;
}

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

提前致谢

Answer 1

那些似乎是四舍五入的差异，来自 0.1875em border-width ...... IE 开发工具将计算值显示为 4.32px - 只要我将其替换为4px 在你的 CSS 中，效果消失了。

因此，如果您可以接受绝对值，请使用一个，它应该是固定的。如果不是，至少尝试找到一个值，该值确实为不同的字体大小提供“更圆”的像素值。