大概看了下:
.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,二来整个表格看起来不会显得太靠右。