简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
firefox下,translate属性在hover效果下,会使得文字产生晃动.
高洛峰
高洛峰 2016-10-25 15:47:01
0
1
807

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

<!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>


高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

모든 응답(1)
三叔
三叔2016-10-25 15:47:20 1층

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

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


좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！