75％+ 25％不会100％...显然！ CSS问题

Question

我的图片宽度为75％，宽度为25％的p盒，但它们不适合父容器！

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

Answer 1

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

见updated 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/

这是Box Model Bug，您可以在维基百科上阅读：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 */ )
}