我遇到了以下问题.
在我创建的这个网站上,我有一个位于页面底部的图库.如果我将鼠标悬停在拇指上,它们会疯狂地飞来飞去,这不是我想要的.它就像其他浏览器的魅力一样; 只有Microsoft Edge受到影响.
有人可以帮助我让图像按预期运行吗?
CSS看起来像这样:
.node-gallery {
float: left;
width: 150px;
height: 150px;
position: relative;
margin: 0 60px 50px 0;
}
.node-gallery img {
position: absolute;
bottom: 0px;
}
.node-gallery .image1 {
left: 0px;
z-index: 3;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease
}
.node-gallery .image2 {
left: 7px;
height: 148px;
z-index: 2;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease
}
.node-gallery .image3 {
left: 14px;
height: 145px;
z-index: 1;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease
}
.image1, .image2, .image3 {
border: 5px solid #F3F3F3!important;
box-shadow: 1px 1px 2px #666;
-webkit-shadow: 1px 1px 2px #666;
-webkit-transform: rotate(0deg) translate(0px);
}
.node-gallery:hover .image1 {
z-index: 6;
-ms-transform: rotate(-5deg) translate(-20px, -2px);
-ms-transform-origin: center bottom;
-webkit-transform: rotate(-5deg) translate(-20px, 2px);
-webkit-transform-origin: center bottom;
-moz-transform: rotate(-5deg) translate(-20px, -2px);
-moz-transform-origin: center bottom;
-o-transform: rotate(-5deg) translate(-20px, -2px);
-o-transform-origin: center bottom;
}
.node-gallery:hover .image2 {
z-index: 5;
-ms-transform: rotate(-2deg) translate(0px, 2px);
-ms-transform-origin: center bottom;
-webkit-transform: rotate(-2deg) translate(0px, -2px);
-webkit-transform-origin: center bottom;
-moz-transform: rotate(-2deg) translate(0px, 2px);
-moz-transform-origin: center bottom;
-o-transform: rotate(-2deg) translate(0px, 2px);
-o-transform-origin: center bottom;
}
.node-gallery:hover .image3 {
z-index: 4;
-ms-transform: rotate(5deg) translate(20px, -2px);
-ms-transform-origin: center bottom;
-webkit-transform: rotate(5deg) translate(20px, 2px);
-webkit-transform-origin: center bottom;
-moz-transform: rotate(5deg) translate(20px, -2px);
-moz-transform-origin: center bottom;
-o-transform: rotate(5deg) translate(20px, -2px);
-o-transform-origin: center bottom;
}
Jon Uleis.. 10
几个月后,我相信我刚遇到同样的错误,并找到了解决方案.似乎Microsoft Edge 13在解释一些通常可接受的值时遇到问题transform-origin
.特别是对我来说,它忽略了价值right center
,但工作正常top left
,让我相信center
价值(我在你的示例代码中看到)可能是问题.
我的修复是使用百分比值,所以transform-origin: center bottom
会变成transform-origin: 50% 100%
.希望这可以帮助遇到此问题的任何人.
请注意,尽管顶级投票的答案提示了ms-
前缀,但这个问题是关于最近的MS Edge浏览器,并且自Internet Explorer 9以来,对于转换属性(每个caniuse.com),并不需要该前缀.
几个月后,我相信我刚遇到同样的错误,并找到了解决方案.似乎Microsoft Edge 13在解释一些通常可接受的值时遇到问题transform-origin
.特别是对我来说,它忽略了价值right center
,但工作正常top left
,让我相信center
价值(我在你的示例代码中看到)可能是问题.
我的修复是使用百分比值,所以transform-origin: center bottom
会变成transform-origin: 50% 100%
.希望这可以帮助遇到此问题的任何人.
请注意,尽管顶级投票的答案提示了ms-
前缀,但这个问题是关于最近的MS Edge浏览器,并且自Internet Explorer 9以来,对于转换属性(每个caniuse.com),并不需要该前缀.