CSS3 hover transform 图片会抖动怎么解决？

html-css016

CSS3 hover transform 图片会抖动怎么解决？,第1张

经测试，采用Firefox 45.0.1存在闪烁问题，并发现以下浏览器的某个版本：微信内置浏览器、QQ浏览器、Safari手机浏览器及早期的Chrome可能存在类似情况，包括载入闪动，悬停后闪动。分析：Blink对transition中，属性transform的动画渲染存在差异，而Chrome中的最新版本，已经不存在此情况。解决方法：<style>.outter { height: 375px margin: 10px auto width: 500px }.inner{}img:hover { width:110% margin-left:-5% margin-top:-5%}img{width:100% transition:0.4s ease-in-out}</style>复制代码以上CSS，在IE10、IE11、Chrome及Firefox 45.0.1中调试通过：首次载入，及Ctrl+F5刷新，均不会有闪动情况

父级的div的width：100%；height：固定值，如果设为position：relative的话，子级的div用position：absolute。如果你怕因为屏幕的大小而不好设置的宽高的话，建议你顶部导航和底部版权栏的盒子设为width：100%； 中间正文部分就用固定width，margin：0 auto居中，中间的div全部居中就不会因为屏幕尺寸影响太大，最多是比例的问题。

这个呀，那应该是定位的问题吧。是不是用的绝对定位（用DW的“层”也是一样的）了呢。

这个应该也是比较好解决的，用一下“相对定位的绝对定位”就好了。也就是，把外层标签弄成“相对定位”。比如：

<div>

<div></div>

</div>

如果里面的DIV是绝对定位的话，你把外面的那个DIV弄成相对定位就好了。

就是这样了。

如果还有问题，或是我说的你不明白，你再Q我（Q号我的资料里有写）好了，我也可以简单的指导下你的学习。