团队采用 mindoc 作为文档平台已经好几年了,也为 mindoc 的发展做了不少的改进,例如文档阅读时可以调整目录区与内容区区域的分割条,就是一例。
分隔条上有个手柄,用以控制将目录直接隐藏或者显示。平时不太注意的话,可能大家都不会发现,其实手柄的位置是有一点点问题:略微靠下。原因很简单,手柄元素的定位属性是 top,被设定为 50%,也即垂直方向的正中,然鹅,它自身是有高度的啊。去年曾让组内一个兄弟做调整,他最后给出的调整语句令人哭笑不得:把 50% 改成了 45%。
这种狗皮膏药式的修改显然太 low,于是三太爷只好自己偷个空来亲自解决它。用检查器看了下整个手柄元素的高度,取决于其中的一个子元素,为 30px。一开始尝试 vertical-align 以及 display 和 align-self 之类的属性组合,均没有成效。最后只好放弃让浏览器完全自适应自动进行计算的努力,把 margin-top 设定为上抬整体高度的一半,也即 -15px,果然立竿见影。