IE 11上的伪元素转换忽略填充
IE 11上的伪元素转换忽略填充
提问于 2015-06-12 22:42:17
试图做一个按钮悬停效果，我偶然发现了这个奇怪的错误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;
}谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-09-29 19:44:39
不知道你是否得到了这个马龙的答案，但我刚刚遇到了与IE基本上相同的问题。谢天谢地，我已经设法找出了奇怪的IE是造成这一问题。
这似乎是当你混合你的测量前缀，如px，%，em，大众等。
在我的问题上，我从一辆大众转向px --除了IE之外，其他地方都运行得很好。一旦我把我的大众换成了px，一切都很好。
在上面的例子中，发现这一点甚至不那么明显。您将前/后设置为100% -%的宽度作为度量。然后，在悬停状态下，将它们都设置为0 (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(0)时，我也不会费心地添加度量，但我猜如果您使用的是转换，那么IE需要匹配它。
希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30813193
复制相关文章
相似问题
腾讯云开发者
