75％+ 25％が100％にならない...明らかに！ CSSの問題

Question

イメージの幅は75％、幅は25％のp-boxですが、親コンテナには収まりません！

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

Answer 1

を私はこれを少し調整してみてくださいと思います：

.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 */) 
} 

Answer 2

問題は、CSS widthで、実際に "コンテンツの幅" を意味します。パディングとボーダーはカウントされません。そのため、補間するために幅を調整（縮小）する必要があります。

updated jsfiddleを参照してください。 20%の幅を16%（両側の2%の余白を補正）に変更し、丸めの問題を考慮して80%を79%に変更しました。

注：新しいブラウザでは、特定の要素に「従来型」（Microsoft）ボックスモデルを使用することができます。widthは、パディングと枠線を含む全幅を意味します。例についてはCthulhuの答えを参照してください。

Answer 3

ジャストキャプションを.flexする-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;を追加します。

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

これは、ボックスモデルのバグである、あなたがウィキペディア上でそれについて読むことができます：http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug