用 calc()计算的宽度,在 chrome 显示正常,显示正常,在 IE 浏览器显示不正常
原本以为是盒模型没有设置的问题,后来发现是因为用 calc()计算宽度的,除不尽的问题导致的。
需求:一行的宽度是 1170px,分 3 块,margin-left: 14px;
每一块的宽度
1 | width: calc((100% - 14px * 2) / 3); //380.666666667 |
在 chrome 浏览器显示正常,在 IE 浏览器排不下。
发现问题出在了,calc()除不尽的情况下,
chrome 浏览器保留了 3 位小数再减了 0.1(最后宽度是 380.656px);
这样每一块的宽度加起来没有超出总宽度,一行显示正常。
IE 浏览器保留了 2 位小数,最后一位小数四舍五入了(380.67px),3 块加起来超出总宽度,导致一行排不下。
chrome 浏览器
IE 浏览器