75 % + 25 %는 100 %를 만들지 않습니다 ... 분명히! CSS 문제

Question

이미지 너비가 75 %이고 너비가 25 % 인 p 상자가 있지만 부모 컨테이너에 맞지 않습니다!

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