javascript - hover悬停的时候字体加粗，会增加宽度，导致文字列表会抖动一下。

Question

这样的情况下中，不能定宽只给了padding，要如何解决这个抖动的问题。

我是这样解决的，给一个margin是悬停后增加的宽度， 悬停时再干掉margin，不过显然是个下策，每个字数都不一样增加的宽度也就不一样，一个一个加margin,蛋疼。

好像没有去测浏览器的兼容，是不是各个浏览器加粗后增加的宽度是否一样。。。

有没有更好的办法？？？？

Answer 1

如果不给定宽度的话，改变font-weight:bold;，字体所占的宽度变大是不可避免的，实在要保持不变的话有以下两种：

1. js使改变margin或padding的大小来动态改变保持宽度不变，但是这个可能比较复杂

2. 使用隐藏的伪元素，实例

参考：text shifting on bold hover

Answer 2

加个letter-spacing 让文字本身就带一些间隔呢