Question

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

即使在IE11上也是如此。

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

整个下午我一直在尝试解决这个问题，但我似乎无法找到问题。

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要求它匹配。

希望这有帮助。

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

1 个答案: