css3,css3动画_firefox下,translate属性在hover效果下,会使得文字产生晃动.，css3,css3动画,html5,前端

firefox下,translate属性在hover效果下,会使得文字产生晃动.

如题,在win下或是非retina屏的osx系统,firefox浏览器打开下面的代码;
hover后不知道为何里面的文字会晃动..
如果将<h1>改成<p>,似乎就不会有这样的问题,不知道这到底是什么原因..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .a{width:200px;height:200px;background-color:red;margin:0 auto;transition:all .2s ease;}
    .a:hover{
        transform:translateX(-2px);
    }
    </style>
</head>
<body>
    <div class="a">
        <h1>去玩儿去玩儿</h1>
        <p>阿斯蒂芬</p>
        <p>阿斯蒂芬哒</p>
    </div>
</body>
</html>

div没有清浮动h1的默认margin值透过div

.a {overflow:hidden;}

清楚浏览器默认样式

*{margin:0;padding:0;}

a{} 里面加一个：transform: translateX(0);

transform会创建新的层叠上下文，在渲染的时候，可能会引起元素的移动~