hover悬停的时候字体加粗,会增加宽度,导致文字列表会抖动一下。-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

杨冬芳 2016-06-06 09:07:50 2098

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

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

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

有没有更好的办法?

分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:27:31

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

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

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

    参考:text shifting on bold hover

    0 0
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章