如题,在win下或是非retina屏的osx系统,firefox浏览器打开下面的代码;
hover后不知道为何里面的文字会晃动..
如果将<h1>改成<p>,似乎就不会有这样的问题,不知道这到底是什么原因..
3
631<!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>
<p class="a">
<h1>去玩儿去玩儿</h1>
<p>阿斯蒂芬</p>
<p>阿斯蒂芬哒</p>
</p>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
a{} 里面加一个：transform: translateX(0);
transform会创建新的层叠上下文，在渲染的时候，可能会引起元素的移动~
清楚浏览器默认样式
p没有清浮动h1的默认margin值透过p