今天工作上遇到一个问题,portal首页,banner搜索框一搜索下方就会整体下移60px,正好是banner宽度,代码是同事扒oracle首页扒下来的,我找了半天也没找到触发的方法或者css,刚开始的解决方案是搜索内容出现时,用jquery选中dom元素给top:60px,失焦后再设置dom元素top:auto,暂且糊弄过去了,后来leader觉得不好,因为focus/blur 页面会短暂的抖动一下,于是我开始找真正解决的方法,我注意到下方的元素整体是向上60px的,也就是上方60px的内容是被banner覆盖了,搜索时上方60px又下来了,这才导致的页面样式变异,最后解决办法是把下方整体position:fixed;top:60px,果然bug没有复现。
一点小小的启发:开始我的解决思路是找搜索触发了哪些方法导致的样式变形,找了半天实在找不到了,于是又走另一条路,页面变形多了哪个样式?其实也没找到,最后实在没找招了,就想着怎么能改成正常样式。
css说实话,并不是完完全全能按照自己的想法自己的代码实现的,有一点那种潜在的直觉,还是需要时而练手才能保持住。