CSS边框样式border设置1px（小于或等于3px）之后，缩放浏览器窗口，导致布局出现问题

项目场景：

在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像素的边框大小值，浏览器窗口缩放必然会造成边框的变化

题外话：以后遇到这样的问题，找不出自身的原因就要多看看四周，是不是环境有问题，我其实一直都怀疑我的代码是否有问题（其实也的确有问题，宽度给多了），去找浮动的“麻烦”，去看他父亲（父元素）“麻烦”，甚至把他的儿子（子元素）也问候了一遍，最终发现是边框长胖了。