IE 11 上的伪元素转换忽略填充

Question

尝试制作按钮悬停效果时，我在 IE 上偶然发现了这个奇怪的错误。

即使在 IE11 上也会发生这种情况。

当您将鼠标悬停在按钮上时，伪元素会“跳跃”它们的过渡。 如果您删除填充，它会停止！

我整个下午都在努力解决这个问题，但我似乎找不到问题。

这是演示：http://codepen.io/anon/pen/rVwRKL

HTML
<a href="http://##" title="yeah">Live Button</a>

CSS
body
{
  padding: 5em;
  margin: 0;
}

a{
  padding: 1em 1em;
  margin: 0;
  box-shadow: inset 0px 0px 0px 3px blue;
  position: relative;
  box-sizing: border-box;
  display: inline-block;
}

a::before,
a::after
{
  transition: width 0.4s ease, height 0.4s ease 0.4s, opacity 0.4s ease;
  content: " ";
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  border: solid 3px green;
  display: inline-block;
}

a::after
{
  right: 0;
  bottom: 0;
  border-right-color: transparent;
  border-top-color: transparent;
}

a::before
{
  left: 0;
  top: 0;
  border-left-color: transparent;
  border-bottom-color: transparent;
}

a:hover::before,
a:hover::after
{
  transition-delay: 0.4s, 0s, 0.7s;
  width: 0;
  height: 0;
  opacity: 0;
}

谢谢！

Answer 1

不确定您是否曾经得到过这个 Marlon 的答案，但我刚刚遇到了与 IE 基本相同的问题。谢天谢地，我已经设法找出导致问题的 IE 中的怪异之处。

这似乎是当您混合测量前缀时，即 px、%、em、vw 等...

在我的问题中，我从 vw 转到 px - 除了 IE，这在任何地方都可以正常工作。一旦我将我的 vw 更改为 px 一切正常。

在您上面的示例中，发现起来就更不明显了。您将之前/之后的宽度设置为 100% - % 作为测量值。 然后，在悬停状态下，您将它们都简单地设置为 0（零）而不进行测量。这就是问题所在，因为没有测量值 不一样 % IE 似乎很难弄清楚 (?!?!?!)。只要将 % 添加到悬停状态的宽度/高度，它就可以正常工作。

在此处查看调整宽度/高度的工作示例：http://codepen.io/anon/pen/YyNWzw

以前的 CSS

a:hover::before,
a:hover::after
{
  transition-delay: 0.4s, 0s, 0.7s;
  width: 0;
  height: 0;
  opacity: 0;
}

调整后的 CSS

a:hover::before,
a:hover::after
{
  transition-delay: 0.4s, 0s, 0.7s;
  width: 0%;
  height: 0%;
  opacity: 0;
}

通常我也不会在值为 0（零）时添加测量值，但我猜如果您使用转换，那么 IE 需要它匹配。

希望这会有所帮助。