我有一个名为#profile-grid 的容器,我希望它的宽度为 330 像素。它包含一个 330 像素宽的图像和一个 330 像素宽且周围有 1 像素边框的图像下方的内联列表。我希望列表和图像的宽度完全相同。在 IE 中它排列完美,但在 Chrome 中它太短了 2px。我究竟做错了什么? http://jsfiddle.net/ZPQUP/13/
最佳答案
正如您的标题所暗示的,问题是盒子模型。
最好的办法是明确设置盒子模型,然后使用 polyfill 使其适用于旧版浏览器。 Paul Irish 在这里描述了问题和解决方案:http://paulirish.com/2012/box-sizing-border-box-ftw/
我已经在更新的 fiddle 中展示了它的样子:http://jsfiddle.net/mstauffer/ZPQUP/14/
本质上,不同的框模型在边框和填充是包含在中还是外部添加到宽度上有所不同。
关于html - 盒子模型的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9320952/