在各方面还没准备好的时候,大家一定要慎用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了,虽然这是个很好的渲染模式,能带来各种便利,

但是,没办法,我们不得不受限于历史和现状!!

 

posted on 2017-01-06 12:46  丰云  阅读(289)  评论(0编辑  收藏  举报

导航