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

Question

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

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

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

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

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 一切正常。

在你上面的例子中，它甚至更不明显。您将 before/after 设置为 100% 的宽度 - % 是测量值。 然后，在悬停状态下，您将它们都设置为 0（零）没有测量。这就是问题所在，因为没有测量值 与 % 不同 ，IE 似乎很难弄清楚 (?!?!?!)。只要在悬停状态下将 % 添加到 width/height，它就可以正常工作。

请参阅此处调整后的工作示例 width/height：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 会要求它匹配。

希望对您有所帮助。

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

Pseudo elements transition on IE 11 ignores padding

css

internet-explorer

debugging

transition