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

试图做一个按钮悬停效果我偶然发现了IE上的这个奇怪的错误。IE 11上的伪元素转换忽略填充

即使在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; 
}

谢谢！

来源

2015-06-12 Marlon Marcello

我没有看到IE 11和Chrome之间的巨大差异。你可以分享另一个演示，尽可能少的代码，强调这个问题？ – Sampson

当您在IE11中查看框时，它看起来像正在动画的3px边框的一部分在框的中间短暂显示，然后移动到框的中间。它发生得很快。我假设这是什么OP是在谈论 – crazymatt

确实提供了一个行高而不是顶部和底部填充帮助？ –

不知道你是否有过这个马龙的答案，但我刚刚遇到基本上与IE相同的问题。感谢我设法弄清楚IE导致问题的奇怪之处。

看来，当你混合您的测量前缀，即像素，百分比，EM，大众等..

在我的问题，我是从一个大众要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（零）时，但是我是gu如果你正在使用转换，那么IE需要它匹配。

希望这会有所帮助。

来源

2015-09-29 19:44:39 SaRiD

男人，我只是在一个旧的jsFiddle上测试了你的解决方案，这个问题很有效。感谢您抽出时间回复。 –

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

回答

相关问题