防止元素在 Chrome 中跳来跳去

【问题标题】：Prevent elements from jumping around in Chrome防止元素在 Chrome 中跳来跳去
【发布时间】：2013-06-18 08:26:17
【问题描述】：

查看http://myhymnal.net/2 的页面。在 Chrome 中，当页面加载标题和歌词（键选择器和链接）之间的所有其他元素时，似乎会移动一点。当您将鼠标悬停在两个部分上时也会发生同样的情况。似乎与不透明度和/或 CSS 过渡有关？

据我所知，这只发生在 Chrome 中，我不明白这里发生了什么，因为它在 FireFox、Opera 和 IE 中都可以正常工作。

我的 CSS 或标记有什么问题吗？或者它是 Chrome 中的一个错误？或者这里发生了什么？有什么办法防止它发生？

【问题讨论】：

【解决方案1】：

更改您的 font 声明：

body, input, textarea, select {
    font: 120%/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}

到

body, input, textarea, select {
    font: 100% 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}

您的所有元素似乎都根据此缩放，因为它们在em 中设置了测量值。

我的描述可能有误，但解决方案有效 :)

【讨论】：