排查小伙伴的菜单项抖动问题，顺便分享一个chrome对比样式的小插件
这一小伙伴发来的问题
他说啊点击这个菜单的时候
下边这个菜单会抖一下
大家看
那首先碰到这种问题呢
我们肯定会想到对比一下这个菜单
前后点击之后变化的样式
那正好
借这个机会给大家分享一个插件
就是这个CSS Diff
打开我们首先先选中这个节点
然后呢点一下compare
好然后再
选中它
然后再点一下compare
然后呢左侧就是他变化的这些样式
然后右侧上面是原来的样式
下面就是他新的样式
通过对比啊咱们发现其实
他没有改变关于尺寸的东西
都是颜色之类的
所以呢我们就可以排除
是它这个元素的样式的问题
然后呢经过我仔细看啊
它上面还有一个这个元素
大家看我在不选中它的时候
它现在的display是等于Flex的
但是呢当我选中了下面这个菜单呢
它的display已经变成none了
但是很奇怪啊因为这个元素即使是
隐藏起来和不隐藏起来它高度都是
大家看我现在选中它
现在它是flex
它的高度是
但是呢如果我选中了下面这个元素
虽然他是隐藏
但是按说应该也是高度是0对吧
所以就很奇怪
我们再来仔细看
我们再选中它
然后选中这个computed
注意看它下面有1像素的margin
所以呢
它这个应该是异像素的margin导致的
我们先把这个margin去掉哈
我们找到这个margin
在这里我们把它勾掉
然后我们再选中下边
好了这样就不抖了
然后刚才那个插件的地址呢在这里
就是这个CSS Diff
大家可以直接啊把这个项目下载（并解压）下来
然后呢
在Chrome插件里把这开发者模式打开
然后把它（解压后的目录）拖进来就装上了
最后更新于