项目场景:
在css里面对盒子加边框时,调整像素值为1px,运行到浏览,缩放页面,会造成页面排版出现问题
问题描述:
窗口大小是100%
窗口缩放
在这里我是对dl设置了一个1px的边框,按照我写的代码dt,dd都会向左浮动,盒模型是用的诡异盒模型,dt+2dd的宽度正好是dl的宽度,dd宽度为366px。窗口正常(100%)时,页面还是正常的,由于页面比较长,当我将页面缩放时,页面的排版就发生了诡异的变化
原因分析:
仔细观察页面变化,就会发现dd的排版出现了问题,本来是浮动一边一个显示,现在又变没有多余的位置放一个宽为366px的dd盒子
我们将盒子的边框设为1px时,由于页面缩放了,会导致边框变大,使用的是诡异盒模型,边框变大,内容区域变小,实际可放置的宽度小于366px了,就会将dd盒子“挤走”
解决方案:
我在网上搜索了很久,根本找不到解决方法(感觉都没人在意这个小问题)。
想到只要空间能装下两个dd盒子就行,我想到了一个方法,我就将盒子的width宽度变小,这样不就装的下了吗,这样排版不就正常了吗,于是,我将dd盒子大小改小了4px,改成了362px,这样页面布局就正常了。
浏览器缩放最小,边框变为了3.227px,border使用1、2、3像素时都会遇到相同的问题。
总结:使用1,2,3像素的边框大小值,浏览器窗口缩放必然会造成边框的变化
题外话:以后遇到这样的问题,找不出自身的原因就要多看看四周,是不是环境有问题,我其实一直都怀疑我的代码是否有问题(其实也的确有问题,宽度给多了),去找浮动的“麻烦”,去看他父亲(父元素)“麻烦”,甚至把他的儿子(子元素)也问候了一遍,最终发现是边框长胖了。