在各方面还没准备好的时候,大家一定要慎用border-box样式!!!!
这几天,我被一个js问题困扰到癫狂了!
事情是这样的,我之前写了个功能非常复杂的纯jquery代码的前端gridview控件,实现了大量的功能和效果,在一些项目里也用得很好。
最近有个项目,样式做了调整,把浏览器默认的box-sizing属性改成了border-box,然后界面和控件出了很多问题。
于是我开始着手解决这些问题。正当我以为都解决得差不多的时候,发现了一个诡异的现象,就是当我用鼠标拖动grid边框,做放大缩小的调整时,
发现无论我是放大还缩小操作,grid都是执行的缩小操作,但当我调试时,一步一步的操作,又没有问题!
好吧,我们都知道,计算机是不会主动出错的,问题肯定出在代码上。。。。
于是我试图从各个角度解释。。。各种调试,各种重算。。。。然并卵。。。都没发现问题!!!
直到今天上午,终于找到根源了:
那就是,在box-sizing:border-box情况下,jquery的$().css({width: xxx, height:yyy})这种方式不行!!!会造成事实上的尺寸减少!!!
应该改成$().width(xxx). height(yyy)!!!
具体jquery的css实现方法以及深层次的原因,这里我们就不探讨了,我只想告诉大家,
在我们的应用开发环境还没准备好的时候,大家不要轻易使用box-sizing:border-box了,虽然这是个很好的渲染模式,能带来各种便利,
但是,没办法,我们不得不受限于历史和现状!!