反馈 表格的 bug

andor_chen · 2011年11月10日 · 最后由 andor_chen 回复于 2012年02月04日 · 2418 次阅读

大概看了下:

.box 的 width 是 680px,xxlarge 的 input/textarea width = 520px,加上 padding 和 border,实际 width 是 530px,div.input 的 margin-left: 150px

530 + 150 = 680px 正好是 .box 的宽度

而,input/textarea 的 box-shadow 是:inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6),第二个 shadow 有 8px 的 blur

所以,当用户 focus 到 xxlarge 的 input/textarea 后,会多出 8px 的宽度来,那么诡异的现象就出现了:

height 高出了 41 - 28 = 13px > 0

这样 focus 后整个页面就会有个很好玩的上下移动的动作发生,至少在 Chrome 下有这种情况,其他浏览器未测试。

建议将 xxlarge 的 width 适当的改小一点儿,或者 div.input 的 margin-left 少一点儿,一来解决了这个 bug,二来整个表格看起来不会显得太靠右。

图片无法显式?

修复了!form .input 的 margin-left 减少 4px,再看看有无问题

多谢反馈!

Chrome 下 OK 了 :)

需要 登录 后方可回复, 如果你还没有账号请 注册新账号