css - 75% + 25% 不等于 100% ……显然！CSS 问题

Question

我有一个宽度为 75% 的图像宽度和一个宽度为 25% 的 p-box，但它们不适合它们的父容器！

http://jsfiddle.net/bmBnF/4/

Answer 1

问题是在 CSS 中width实际上意味着“内容宽度”。填充和边框不计算在内，因此您必须调整（减小）宽度以补偿它们。

请参阅更新的 jsfiddle。请注意，我将20%宽度更改为16%（补偿2%每一侧的边距），并更改80%为79%以解决舍入问题。

注意：在较新的浏览器中，您可以强制对特定元素使用“传统”（Microsoft）框模型，然后width意味着全宽，包括填充和边框。有关示例，请参见 Cthulhu 的答案。

Answer 2

只需添加-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;到 .flex-caption：

http://jsfiddle.net/Cthulhu/bmBnF/2/

这是盒子模型错误，您可以在维基百科上阅读：http ://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Answer 3

我会尝试调整一下：

.flexslider .slides img {
    float: left; /* leave other properties */
}

.flex-caption {
    width: 16%; /* leave others - width is 16% because you have a 2% padding around all sides ( 16 width + 2 left + 2 right */ )
}