如题,在win下或是非retina屏的osx系统,firefox浏览器打开下面的代码;
hover后不知道为何里面的文字会晃动..
如果将<h1>改成<p>,似乎就不会有这样的问题,不知道这到底是什么原因..
1
1054<!DOCTYPE html>
<html>
<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>
<h1>去玩儿去玩儿</h1>
<p>阿斯蒂芬</p>
<p>阿斯蒂芬哒</p>
</div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
a{} 里面加一个：transform: translateX(0);
transform会创建新的层叠上下文，在渲染的时候，可能会引起元素的移动~