html - 盒子模型的问题

标签 html css

我有一个名为#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/

相关文章:

html - div 和 ion-list 移除了 col-6 对网格的影响

css - 响应式设计但在右侧而不是底部显示一列

css - 水平滚动条

html - 如何在 HTML <table> 中的 <td> 元素中设置列?

javascript - 如何创建直接链接以打开 Bootstrap 模式的 URL

javascript - 如何使用 javascript 更改图像位置?如何以整数形式获取 div 宽度?

html - 如何理解这种CSS继承(或覆盖、选择)

javascript - 动态 html 表单

html - 使用转换构建抽屉

css - compression test.min.css 和 compression test.css 的区别