如何解决Firefox在应用翻译时呈现不同的元素
在悬停上应用translateY会使链接看起来像在Firefox(当前版本)中移到侧面。这是由em所施加的左边距引起的,它并不是真正在移动像素,而只是以不同的方式呈现,看起来像在移动。 Chrome没有问题。
这是示例页面:
.icon-button-user-action-base {
text-decoration: none !important;
margin-left: 0.2em;
}
.icon-button-user-action-base:hover i {
transform: translateY(-8px);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<a href="#" class="icon-button-user-action-base" style="font-size: 83px;">
<i class="far fa-square"></i>
</a>
<div style="position: absolute; left: 98px; top: 0; height: 100%; width: 100px; background-color: blue;">
</div>
有没有解决此问题而不将边距更改为px的想法吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。